Javascript 删除一个Div将删除另一个Div的onclick'；s

这里有一种奇怪的行为

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

（函数（）{
var images=document.getElementsByTagName（'img'）；
对于（var i=0；i

这当然是简化的代码。 单击覆盖后， 覆盖层（和竞赛）被移除。 但是，onclick-evens的图像不再起作用了。

---

知道为什么会发生这种情况吗？

这是因为以下几行：

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

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

---

与其更改

innerHTML

属性，我建议您动态创建覆盖图块，并将其前置到

body

这是覆盖图的代码，而不是单击时的图像（不在其中）确定，因此，既然我重写了整个

正文

所有内容都会释放事件，那么一般来说，执行**.innerHTML=**.innerHTML不是一个好主意。虽然看起来您应该能够做到这一点，但分配innerHTML属性有副作用。@Dementic在将DOM的一部分转换为字符串时，不可能序列化事件数据（如果没有内联处理程序，这很糟糕）。