5 
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 であることがわかりました。

4

1 に答える 1

4

を使用a.innerHTML += strして新しい要素を追加すると、新しい要素が再度追加される前に のサブツリー全体aが削除されます。削除すると、以前に追加したイベントのバインドも解除されます。

この場合、適切な DOM 関数を使用することをお勧めしvar btn = document.createElement()ますa.appendChild(btn)。

@ShadowWizard が提供するフィドル: http://jsfiddle.net/qR6e8/

于 2012-08-13T08:08:13.323 に答える