刪除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 evens不再工作了。 任何想法爲什麼發生這種情況？

Answer 1

這是因爲下面一行：

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

這裏您連接直接HTML內容與刪除綁定到所有包括你的圖像元素的所有事件的字符串。

而不是更改innerHTML屬性，我會建議您動態創建疊加塊並將其前置到body。