Question

我想动态创建一些对象并将事件绑定到它们（不重要的是什么事件）。

我正在将一个数字传递给该事件，以便区分这些项目。有我的代码：

$('#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/。

Answer 1

由于您使用的是closure scoped variable in a 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)
    }
});

Answer 2

好像你遇到了关闭问题，试试这个：

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

这将创建立即调用的函数，该函数将关闭变量i，以便将来可以使用它。现在你只需覆盖for循环中的i变量，这样你就可以获得与上一次for循环迭代相同的值。

Answer 3

不要在循环中创建函数。

<强> DEMO

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

jQuery - 通过数据将变量传递给事件

3 个答案: