使用闭包捕获的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); 
}));