1

いくつかのオブジェクトを動的に作成し、それらにイベントをバインドしたいと思います (どのイベントかは重要ではありません)。

これらのアイテムを区別するために、イベントに番号を渡しています。私のコードがあります：

$('#add_btn').click(function() {
    var cont = $('#buttons');

    for(var i=0; i<5; i++) {
        var new_btn = $('<input>').attr('type', 'button').val(i);

        new_btn.click(function() {
            alert(i);
        });

        cont.append(new_btn);
    }
});

新しく作成したボタンのどれかをクリックすると、表示される数は5です。

変数は参照渡しだと思いますiが、問題は、変数の参照渡しを避ける方法です。さらに、イベントをバインドする前に新しい変数を作成しても (そのため、参照は別のオブジェクトを指す必要がありますnew_val = i.toString())、値はすべてのボタンで同じです (その 4、理解可能です)。

イベントでアタッチnew_btn.data()して読み取ることができることはわかっていますが、オーバーヘッドにならないかどうかはわかりません。

jsfiddle へのリンク: http://jsfiddle.net/Jner6/5/。

4

3 に答える 3

2

loop でクロージャ スコープ変数を使用しているため、ループ内でプライベート クロージャを作成する必要があります。

$('#add_btn').click(function () {
    var cont = $('#buttons');

    for (var i = 0; i < 5; i++) {
        (function (i) {
            var new_btn = $('<input>').attr('type', 'button').val(i);

            new_btn.click(function () {
                alert(i);
            });

            cont.append(new_btn);
        })(i)
    }
});
于 2013-11-05T11:52:52.840 に答える
0

ループ内で関数を作成しないでください。

デモ

var cont = $('#buttons');

$('#add_btn').click(function() {

    for(var i=0; i<5; i++) {
      $('<input>', {type:'button', value:i}).appendTo( cont );
    } 

});

cont.on('click', ':button', function() {
    alert( this.value );
});
于 2013-11-05T11:57:50.137 に答える
0

クロージャーの問題に遭遇したようです。これを試してください：

(function( i ) {
    new_btn.click(function() {
        alert(i);
    });
})( i );

これにより、変数を閉じてi将来的に使用できるように、すぐに呼び出される関数が作成されます。今のところi、for ループで変数をオーバーライドするだけなので、最後の for ループの反復と等しい値が常に同じになります。

于 2013-11-05T11:53:33.603 に答える