首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如果更改了包含innerHTML,则javascript复选框事件侦听器将中断

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

Stack Overflow用户
提问于 2018-08-03 09:10:56
回答 1查看 92关注 0票数 3

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

My code:

代码语言:javascript
复制
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以在不丢失事件处理程序的情况下添加文本和新行?

我的实际代码要动态得多,并且是在循环中完成的,但是事件处理程序被删除的问题可以通过上面的代码来重复。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-03 09:13:58

每当您分配(或连接)容器的innerHTML属性时,该容器内通过Javascript附加的任何侦听器都将被损坏。如果要插入HTML字符串,请改用insertAdjacentHTML

代码语言:javascript
复制
document.querySelector('#child').onclick = () => console.log('child');
document.querySelector('#container').insertAdjacentHTML('beforeend', '<div>newchild</div>');
代码语言:javascript
复制
<div id="container">
  <div id="child">
    child
  </div>
</div>

但通常情况下,显式创建和附加元素要比插入HTML标记字符串,然后将其解析为元素要好得多。例如,而不是

代码语言:javascript
复制
div.innerHTML += "box1<br/>";

你可以

代码语言:javascript
复制
div.appendChild(document.createTextNode('box1');
div.appendChild(document.createElement('br');

代码语言:javascript
复制
const div = document.querySelector('div');
div.appendChild(document.createTextNode('box1'));
div.appendChild(document.createElement('br'));
代码语言:javascript
复制
<div>
content
</div>

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51664055

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档