Event​Target​.add​Event​Listener（）在innerHTML之后不起作用[重复]

Posted 2023-05-07

【中文标题】Event​Target​.add​Event​Listener（）在innerHTML之后不起作用[重复]

【英文标题】：Event​Target​.add​Event​Listener() not working after innerHTML [duplicate]

【发布时间】：2019-09-23 19:33:53

【问题描述】：

我动态创建了一个带有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 的工作 sn-p：

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);

【参考方案1】：

当你连接到一个元素的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!');

【讨论】：

这很快！谢谢！ 10分钟内接受。您会推荐哪一种解决方案？

这完全取决于您。我真的没有意见，他们都工作得很好。如果您要插入重要的标记，使用 insertAdjacentHTML 可能会更好，因为这样新的 HTML 结构会更清晰（当您可以直接看到标记时，不必解析 createElements 和 @987654329 @s 查看与什么相关的内容）

“附加到容器中先前元素的侦听器无法在序列化过程中存活。”这不是发生的事情。 input 已从 DOM 中删除，因此，您在此处拥有的 <input> 不是之前的 input。而且这个没有任何附加的事件。但是事件监听器仍然很活跃（只要 GC 收集到input）。 jsfiddle.net/bqvgmxLd