javascript - 删除一个 Div 会删除其他 div 的 onclick 吗？

Question

这里有一种奇怪的行为。

(function(){
    var images=document.getElementsByTagName('img');
    for (var i = 0; i < images.length; i++) {
        images[i].parentNode.onclick = function () {
            var embed = "whatever";
            document.body.innerHTML = '<div id="overlay"><div class="game">' + embed + '</div></div>' + document.body.innerHTML;
            document.getElementById('overlay').onclick = function () { this.parentNode.removeChild(this); }
        }
    }
})();

这个offcourse是简化的代码。 单击叠加层后， 覆盖层(和竞赛)被删除。 但图像 onclick 事件不再起作用。 知道为什么会发生这种情况吗？

Answer 1

这是因为以下行:

document.body.innerHTML = '...' + document.body.innerHTML;

在这里，您可以将 HTML 内容直接连接为字符串，并删除绑定(bind)到所有元素(包括图像)的所有事件。

我建议您动态创建覆盖 block 并将其添加到 body 之前，而不是更改 innerHTML 属性。