javascript - 使用闭包捕获 onclick 事件

Question

我想纠正这个例子：

var $foo = $('#foo');
for (var i = 0; i < 10; i++) {
    $foo.append($('<li></li>').text(i).on('click', function() {
        alert(i);
    }));
}

以便它i在单击时提醒正确的值。

我怎样才能做到这一点？我知道答案是使用闭包，但我不确定如何实现它。

我试过做

$foo.append($('<li></li>').text(i).on('click', function() {
    return (function(i) { 
        alert(i);
    })();
}));

但这会返回undefined。

JSFiddle在这里：http: //jsfiddle.net/tmcw/4phm7/1/

Answer 1

标准的想法是有一个立即调用的函数：

var $foo = $('#foo');
for (var i = 0; i < 10; i++) {
    (function(i){
      $foo.append($('<li></li>').text(i).on('click', function() {
        alert(i);
      }));
    })(i);
}

Answer 2

您需要为每个函数创建 i 变量的副本：

$foo.append($('<li></li>').text(i).on('click', function(copy_i) {
    return (function() { 
        alert(copy_i);
    })(i);
}));