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

Question

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

我将一个数字传递给事件以区分这些项目。这是我的代码:

$('#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 变量是按引用传递的，但问题是:如何避免按引用传递变量？此外，即使我在绑定(bind)事件之前创建新变量(因此引用应指向另一个对象，例如 new_val = i.toString())，所有按钮的值仍然相同(然后是它的 4 ，可以理解)。

我知道我可以附加 new_btn.data() 并在事件中读取它，但我不确定它是否会产生开销。

jsfiddle 链接:http://jsfiddle.net/Jner6/5/ .

Answer 1

由于您使用的是 closure scoped variable in a loop ，在循环中你需要创建一个私有(private)闭包。

$('#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)
    }
});