是否可以在不破坏后代事件侦听器的情况下附加到innerHTML? [英] Is it possible to append to innerHTML without destroying descendants' event listeners?

查看：27 发布时间：2021/12/1 12:41:22 javascript html innerhtml dom-events

本文介绍了是否可以在不破坏后代事件侦听器的情况下附加到innerHTML?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在以下示例代码中，我将 onclick 事件处理程序附加到包含文本foo"的范围.处理程序是一个匿名函数，它会弹出一个 alert().

但是，如果我分配给父节点的 innerHTML，这个 onclick 事件处理程序被破坏 - 单击foo"无法弹出警告框.

这能解决吗?

<头><script type="text/javascript">函数开始(){myspan = document.getElementById("myspan");myspan.onclick = function() { alert ("hi");};mydiv = document.getElementById("mydiv");mydiv.innerHTML += "bar";}<body onload="start()"><div id="mydiv" style="border: 纯红色 2px"><span id="myspan">foo</span>

解决方案

不幸的是，分配给 innerHTML 会导致所有子元素的破坏，即使您尝试追加也是如此.如果您想保留子节点(及其事件处理程序)，您需要使用 DOM 函数:

function start() {var myspan = document.getElementById("myspan");myspan.onclick = function() { alert ("hi");};var mydiv = document.getElementById("mydiv");mydiv.appendChild(document.createTextNode("bar"));}

Bob 的解决方案，来自评论.发布你的答案，鲍勃！获得荣誉.:-)

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";而 (newcontent.firstChild) {mydiv.appendChild(newcontent.firstChild);}}

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().

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.

Is this fixable?

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

解决方案

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

Edit: 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屋！

查看全文

是否可以在不破坏后代事件侦听器的情况下附加到innerHTML? [英] Is it possible to append to innerHTML without destroying descendants' event listeners?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

是否可以在不破坏后代事件侦听器的情况下附加到innerHTML? [英] Is it possible to append to innerHTML without destroying descendants&#39; event listeners?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

是否可以在不破坏后代事件侦听器的情况下附加到innerHTML? [英] Is it possible to append to innerHTML without destroying descendants' event listeners?

登录关闭