是否有可能附加到innerHTML而不破坏后代的事件侦听器？ [英] Is it possible to append to innerHTML without destroying descendants' event listeners?
问题描述
在以下示例代码中，我将 onclick 事件处理程序附加到包含文本foo的跨度。这个处理程序是一个匿名函数，它会弹出alert（）。
In the following example code, I attach an onclick event handler to the span containing the text "foo". The handler is an anonymous function that pops up an alert().
但是，如果我将父元素赋值给 innerHTML ，这个 onclick 事件处理程序被破坏 - 点击foo无法弹出警告框。
However, if I assign to the parent node's innerHTML, this onclick event handler gets destroyed - clicking "foo" fails to pop up the alert box.
这是可以修复的吗？
<html>
<head>
<script type="text/javascript">
function start () {
myspan = document.getElementById("myspan");
myspan.onclick = function() { alert ("hi"); };
mydiv = document.getElementById("mydiv");
mydiv.innerHTML += "bar";
}
</script>
</head>
<body onload="start()">
<div id="mydiv" style="border: solid red 2px">
<span id="myspan">foo</span>
</div>
</body>
</html>
推荐答案
不幸的是，赋值给 innerHTML 会导致所有子元素的破坏，即使您试图追加。如果要保留子节点（及其事件处理程序），则需要使用 DOM函数：
Unfortunately, assignment to innerHTML causes the destruction of all child elements, even if you're trying to append. If you want to preserve child nodes (and their event handlers), you'll need to use DOM functions:
function start() {
var myspan = document.getElementById("myspan");
myspan.onclick = function() { alert ("hi"); };
var mydiv = document.getElementById("mydiv");
mydiv.appendChild(document.createTextNode("bar"));
}
编辑： Bob的解决方案，来自评论。发布你的答案，鲍勃！为此获得荣誉。 ： - ）
Bob's solution, from the comments. Post your answer, Bob! Get credit for it. :-)
function start() {
var myspan = document.getElementById("myspan");
myspan.onclick = function() { alert ("hi"); };
var mydiv = document.getElementById("mydiv");
var newcontent = document.createElement('div');
newcontent.innerHTML = "bar";
while (newcontent.firstChild) {
mydiv.appendChild(newcontent.firstChild);
}
}
这篇关于是否有可能附加到innerHTML而不破坏后代的事件侦听器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
