javascript - addEventListener 在附加 innerHTML 后消失了

Question

好的，所以我使用 javascript/greasemonkey 将以下 html 添加到站点中。（只是样本）

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

我还为元素添加了一个点击事件监听器。到目前为止一切正常，当我点击元素时点击事件被触发。

但是......我在脚本中有另一个函数，它在一定条件下修改那个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);

Answer 2

作为一个变体，你可以添加这样的 html，它可以在没有 addEventListener 的情况下工作：

<ul>
 <li><a id='abc' onclick='myFunc()'>Hello</a></li>
 <li><a id='xyz' onclick='myFunc()'>Hello</a></li>

 // The following add dynamically
 <li><a id='123' onclick='myFunc()'>Hello</a></li>
</ul>

Answer 3

U can also use jQuery's 'live' function