javascript - JQuery .click が期待どおりに機能しない

Question

Jquery の .click 関数について質問があります。私はこのコードを持っています:

for (var i = 0; i < 5; i++) {
    var divTest = $('<div></div>');
    divTest.text("My Div " + i);
    divTest.click(function() {
        alert("Alert: Div " + i);
    });
    $('#myTest').append(divTest);
}​

「myTest」要素に 5 つの div を追加すると、各 div に対して onclick 関数が対応する div 番号を含むアラートを表示することを期待していました。

div は適切に追加されましたが、div をクリックすると、常にテキストでアラートが表示されます: "Alert: Div 5"。なんで？期待どおりの動作を生成するには、何を変更する必要がありますか?

ここに私の jsFiddle があります: http://jsfiddle.net/BKFGm/2/

Answer 1

.clickundefinedグローバルスコープに他の i 変数がない限り、サイクルとは異なるスコープで動作し、クリックハンドラーが実行されるときです。

Answer 2

これを試すこともできます

$(function() {
    for(var i = 0; i < 5; i++){
        var divTest = $('<div/>', {
            'text':"My Div " + i,
            'click':(function(i){
                return function(){
                    alert("Div: " + i);
                }
            })(i)
        });
        $('#myTest').append(divTest);
    }
});​

デモ。