addEventListener 在附加 innerHTML 后消失了

Posted 2023-05-07

【中文标题】addEventListener 在附加 innerHTML 后消失了

【英文标题】：addEventListener gone after appending innerHTML

【发布时间】：2011-02-10 17:08:03

【问题描述】：

好的，所以我使用 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>

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

如果我注释掉对执行附加的函数的调用，一切都会重新开始工作！

请帮忙...

【问题讨论】：

你的问题可能出在你的javascript中。你能把它贴在这里让我们看看发生了什么吗？

追加新html的函数是：var menu = pmgroot.getElementsByTagName("ul")[0]; menu.innerHTML += <the new html>（它很长，所以我懒得放在这里）</the>

【参考方案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);

【讨论】：

是的，工作就像一个魅力 :) 再次感谢 Andy 和 Jage，感谢它;)

【参考方案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>

【参考方案3】：

你也可以使用jQuery的'live'函数