0

この JavaScript コードに問題があります。

function MyClass() {
    var id_nr = Math.ceil(Math.random() * 999999);
    this.button_id = 'button_' + id_nr;
}


MyClass.prototype = {
    createButton: function() {
        var msg = 'Button \'' + this.button_id + '\' was clicked';

        var my_button = (
            '<input type="button" id="'
            + this.button_id
            + '" value="Click Me" /\>'
        );

        document.body.innerHTML += '<div>' + my_button + '</div>';
        document.getElementById(this.button_id).onclick = function() { alert(msg); }
    }
};


window.onload = function() {
    var s = new MyClass();
    s.createButton();
};

はい、この現在のコードは正常に動作します。しかし、複数の MyClass オブジェクトを追加すると問題が発生します。

window.onload = function() {
    var s = new MyClass();
    s.createButton();

    var w = new MyClass();
    w.createButton();

    /* ...and many other buttons */

};

何らかの理由で、最後に作成されたボタンをクリックした場合にのみonclickイベントがトリガーされます。理由はわかりません。

1 つの回避策は次のようになります。

<input type="button" onclick="javascript:doSomeThing();" />

しかし残念ながら、これは適切な解決策ではありません。なぜなら、私の目標は onclik イベントが別のクラス メソッドも呼び出せるようにすることだからです。(これらのメソッドはまだ作成されていません)。

このコードを正しく動作させるにはどうすればよいですか? どんな種類の助けも大歓迎です。

4

2 に答える 2

0

ここでの innerHTML の使用は、イベント リスナー「onclick」を壊すようです。

これは、document.createElement メソッドを使用して html 要素を作成することで回避できます。

var but = document.createElement("input");
but.type = "button";
but.id = this.button_id;
but.value = "Click me";

document.body.appendChild(but);

個人的には、DOM ツリー要素の操作には jQuery を使用することを好みます。jQuery は、このための非常に強力なツールを提供するからです。

于 2013-04-10T15:44:01.407 に答える