如果更改了包含的innerHTML，javascript 复选框事件侦听器将中断

Question

我正在尝试创建复选框并在每个复选框后插入一个空行。当复选框更改时，我想执行一个函数。

我的代码：

var div = document.getElementById("test");

var cb1 = document.createElement('input');
cb1.id = "cb_test1";
cb1.type = "checkbox";
cb1.defaultChecked = true;
cb1.onchange = function(){alert("hi")};
div.appendChild(cb1);

div.innerHTML += "box1<br/>";

var cb2 = document.createElement('input');
cb2.id = "cb_test1";
cb2.type = "checkbox";
cb2.defaultChecked = true;
cb2.onchange = function(){alert("hi")};
div.appendChild(cb2);

div.innerHTML += "box2<br/>";

问题是，设置包含 DIV 的innerHTML 似乎会删除事件侦听器，因此当触发 onchange 事件时，不会发生任何事情。

如何修改innerHTML 以添加文本和新行而不丢失事件处理程序？

我的实际代码更加动态并且在循环中完成，但是事件处理程序被删除的问题可以用上面的代码重复。

Answer 1

每当您分配（或连接）innerHTML容器的属性时，该容器内通过 Javascript 连接的任何侦听器都将被损坏。如果您想插入 HTML 字符串，请改用insertAdjacentHTML：

document.querySelector('#child').onclick = () => console.log('child');
document.querySelector('#container').insertAdjacentHTML('beforeend', '<div>newchild</div>');

<div id="container">
  <div id="child">
    child
  </div>
</div>

但通常最好是显式地创建和附加元素，而不是插入 HTML 标记字符串，然后将其解析为元素。例如，代替

div.innerHTML += "box1<br/>";

你可以

div.appendChild(document.createTextNode('box1');
div.appendChild(document.createElement('br');

div.innerHTML += "box1<br/>";

div.appendChild(document.createTextNode('box1');
div.appendChild(document.createElement('br');