事件目标.ADD event侦听器()在innerhtml之后不起作用

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字符串重新计算。~~听众~~以前在容器中附加到元素的元素无法在序列化过程中幸存下来 - 更改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!');