javascript - 为什么只能使用最新的按钮？我发现其他按钮的 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函数为null。

Answer 1

当您使用 a.innerHTML += str 追加一个新元素时，在再次添加新元素之前，a 的整个子树都会被删除；移除还会取消绑定(bind)您之前添加的任何事件。

在这种情况下最好使用适当的 DOM 函数，即 var btn = document.createElement() 等和 a.appendChild(btn)。

@ShadowWizard 提供的 fiddle :http://jsfiddle.net/qR6e8/