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