Neden sadece en yeni düğme çalışır? I() diğer düğmenin onclick işlev

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

• boş ben divB1 tıklayın sonra b1.funB aracılığıyla bir düğme oluşturmak bulmak. Ben divB2 tıkladıktan sonra

• , ben b2.funB througb() bir düğme oluşturabilirsiniz.

Neden sadece en yeni düğme uyarı adı? Diğer düğmenin onclick işlevinin boş olduğunu buldum.

Answer 1

Yeni bir öğe eklemek için a.innerHTML += str'u kullandığınızda, a tüm alt ağacı yeni öğeler yeniden eklenmeden önce kaldırılır; Kaldırma, daha önce eklediğiniz tüm etkinlikleri de ortadan kaldırır. Bu durumda uygun DOM işlevlerini kullanmak daha iyi, yani var btn = document.createElement(), vb. Ve a.appendChild(btn). . @ShadowWizard tarafından sağlanan

Fiddle: http://jsfiddle.net/qR6e8/