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

在這種情況下，您應該使用閉包 ：

(function(i) {
    divTest.click(function() {
        alert("Div: " + i);
    });
})(i);

演示： http ： //jsfiddle.net/BKFGm/4/

---

另一個選擇是在eventData映射中傳遞i ：

divTest.click({ i: i }, function(e) {
    alert("Div: " + e.data.i);
});

演示： http ： //jsfiddle.net/BKFGm/11/

Answer 2

再次，一個經典的封閉案例。 i一直在增加，而你想在click事件中錨定它。 嘗試這個：

for( i=0; i<5; i++) {
  (function(i) {
    // your code that depends on `i` here
  })(i);
}

Answer 3

這是一個范圍問題。 此外，這是一個非常常見的問題。

簡單的修復：

for(var i = 0; i < 5; i++){
     var divTest = $('<div></div>')
         divTest .text("My Div " + i);

    (function(index){
        divTest .click(function () {
             alert("Div: " + index);
                    });
    })(i);

        $('#myTest').append(divTest);
}

Answer 4

Alert發生時，變量i已設置為5 。

Answer 5

.click在與循環不同的范圍內工作，並且在執行單擊處理程序時undefined ，除非在全局范圍內有另一個i變量。

Answer 6

你也可以試試這個

$(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);
    }
});​

演示 。