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

我希望在＆＃34; myTest＆＃34;中添加五个div。元素和每个div onclick函数将显示带有相应div编号的警报。

正确添加了div，但是当我点击div时，我总是收到包含文字的警告："Alert: Div 5"。为什么？我需要改变什么才能产生我期待的行为？

这是我的jsFiddle：http://jsfiddle.net/BKFGm/2/

Answer 1

在这种情况下，您应该使用closure：

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

DEMO： http://jsfiddle.net/BKFGm/4/

另一种选择是在eventData地图中传递i：

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

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

DEMO

JQuery .click没有像我预期的那样工作

6 个答案:

你也可以尝试这个