删除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是简化的代码。 点击叠加后， 覆盖（和竞赛）被删除。 但是平板电脑上的图像不再有用了。 知道为什么会这样吗？

Answer 1

这是因为以下一行：

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

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

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