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/

另一种选择是通过i在eventData地图:

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