This question already has answers here:
Is it possible to append to innerHTML without destroying descendants' event listeners?
(13个回答)
在11个月前关闭。
我动态创建一个具有EventListener的复选框。不幸的是,如果我使用
我该如何解决这个问题,为什么它甚至存在?
这是没有
或使用
(13个回答)
在11个月前关闭。
我动态创建一个具有EventListener的复选框。不幸的是,如果我使用
innerHTML
更改复选框标签的文本,EventListener将无法工作:let label = document.createElement('label'),
input = document.createElement('input');
input.setAttribute('type', 'checkbox');
input.addEventListener('change', () => alert('Change Detected'));
label.appendChild(input);
document.body.appendChild(label);
label.innerHTML += 'Select Me!';
我该如何解决这个问题,为什么它甚至存在?
这是没有
innerHTML
的有效代码段:let label = document.createElement('label'),
input = document.createElement('input');
input.setAttribute('type', 'checkbox');
input.addEventListener('change', () => alert('Change Detected'));
label.appendChild(input);
document.body.appendChild(label);
最佳答案
连接到元素的innerHTML
时,将清除其内容,将现有的HTML字符串与新的字符串连接在一起,然后根据新的HTML字符串重新计算容器的内容。 ~~ Listeners ~~容器中先前附加到元素的元素在序列化过程中无法生存-更改innerHTML
之后容器的子代是新的。
附加一个文本节点:
let label = document.createElement('label');
let input = document.createElement('input');
input.setAttribute('type', 'checkbox');
input.addEventListener('change', () => alert('Change Detected'));
label.appendChild(input);
document.body.appendChild(label);
label.appendChild(document.createTextNode('Select Me!'));
或使用
insertAdjacentHTML
:let label = document.createElement('label');
let input = document.createElement('input');
input.setAttribute('type', 'checkbox');
input.addEventListener('change', () => alert('Change Detected'));
label.appendChild(input);
document.body.appendChild(label);
label.insertAdjacentHTML('beforeend', 'Select Me!');