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