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

使用闭包捕获onclick事件

2 个答案: