addEventListener在追加innerHTML后消失了

Question

好的,所以我使用javascript/greasemonkey将以下html添加到网站中.(只是样品)

<ul>
 <li><a id='abc'>HEllo</a></li>
 <li><a id='xyz'>Hello</a></li>
</ul>

我还为元素添加了一个click事件监听器.到目前为止,所有工作都很好,单击元素时会触发click事件.

但是...我在脚本中有另一个函数,在某个条件下修改了html,即它附加了它,所以它看起来像:

<ul>
 <li><a id='abc'>Hello</a></li>
 <li><a id='xyz'>Hello</a></li>
 <li><a id='123'>Hello</a></li>
</ul>

但是当这个完成时,它会破坏我为前两个元素添加的监听器...当我点击它们时没有任何反应.

如果我注释掉对附加函数的调用,它就会重新开始工作!

请帮忙...

Answer 1

每次设置innerHTML属性时,都会覆盖之前设置的任何HTML.这包括连接分配,因为

element.innerHTML += '<b>Hello</b>';

和写作一样

element.innerHTML = element.innerHTML + '<b>Hello</b>';

这意味着所有未通过HTML属性附加的处理程序将被"分离",因为它们所附加的元素不再存在,并且一组新元素取而代之.要保留以前的所有事件处理程序,您必须附加元素而不覆盖任何以前的HTML.要做到这一点,最好的办法是使用DOM创建功能,如createElement和appendChild:

var menu = pmgroot.getElementsByTagName("ul")[0];
var aEl  = document.createElement("a");
aEl.innerHTML = "Hello";
aEl.id "123";
menu.appendChild(aEl);