Question

我动态创建一个具有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);

Answer 1

当您连接到元素的innerHTML时，将其内容清除，将现有的HTML字符串与新的字符串连接起来，然后根据以下内容重新计算容器的内容到新的HTML字符串。 ~~ Listeners ~~容器中先前附加到元素的元素在序列化过程中无法生存-更改innerHTML后容器的子元素是 new 。

改为附加一个文本节点：

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

在innerHTML之后，EventTarget.addEventListener（）不起作用

1 个答案: