爲什麼只能使用最新的按鈕？我發現，其他按鈕的onclick功能爲null

Question

function B(sName) { 
    this.name = sName; 
} 
B.prototype = { 
    instanceCreatButtonCount: 0, 
    funA: function() { // alert instance's name 
     alert(this.name); 
    }, 
    funB: function() { // create a button which clikced can alert this instance's name through funA; 
     var that = this; 
     B.prototype.instanceCreatButtonCount++; 
     var id = "_id" + that.instanceCreatButtonCount; 
     var str = "<button id='" + id + "' >clike me</button>"; 
     var a = document.getElementById("btns"); 
     a.innerHTML += str; 
     var btn = document.getElementById(id); 
     btn.onclick = function() { 
      that.funA(); 
     }; 
    } 
}; 
var b1 = new B("Jim"); 
var divB1 = document.getElementById("b1"); 
divB1.onclick = function() { 
    b1.funB(); 
} 
var b2 = new B("Dad"); 
var divB2 = document.getElementById("b2"); 
divB2.onclick = function() { 
    b2.funB(); 
} 

• 我點擊divB1後，我通過b1.funB創建一個按鈕（）。

• 當我點擊divB2後，我創建了一個按鈕b2.funB（）。

爲什麼只能最新的按鈕提醒名稱？我發現其他按鈕的onclick函數爲空。

Answer 1

當您使用a.innerHTML += str追加新元素時，整個子樹a在新元素再次添加之前被移除;刪除也解除了之前添加的任何事件。

在這種情況下最好使用適當的DOM功能，即var btn = document.createElement()等和a.appendChild(btn)。

小提琴由@ShadowWizard提供：http://jsfiddle.net/qR6e8/