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

本课程是简化的代码。单击覆盖后，将删除覆盖（和比赛）。但图像 onclick 事件不再起作用。知道为什么会这样吗？

Answer 1

这是因为以下行：

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

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

我建议您动态innerHTML创建覆盖块并将其添加到body.