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);

Answer 2

你也可以使用jQuery的'live'功能

Answer 3

作为一个变体，你可以添加这样的 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>

addEventListener在追加innerHTML后消失了

3 个答案: