如果更改了包含innerHTML，则javascript复选框事件侦听器将中断
如果更改了包含innerHTML，则javascript复选框事件侦听器将中断
提问于 2018-08-03 09:10:56
我正在尝试创建复选框并在每个复选框后插入一个空行。当复选框改变时，我想执行一个函数。
My code:
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以在不丢失事件处理程序的情况下添加文本和新行？
我的实际代码要动态得多，并且是在循环中完成的，但是事件处理程序被删除的问题可以通过上面的代码来重复。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-03 09:13:58
每当您分配(或连接)容器的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');
const div = document.querySelector('div');
div.appendChild(document.createTextNode('box1'));
div.appendChild(document.createElement('br'));<div>
content
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51664055
复制相关文章
相似问题
腾讯云开发者
