JQuery .click 没有按我的预期工作答案

【问题标题】：JQuery .click not working as I expectedJQuery .click 没有按我的预期工作
【发布时间】：2012-10-16 22:01:52
【问题描述】：

我对 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”元素添加五个 div，并且对于每个 div，onclick 函数会显示一个带有相应 div 编号的警报。

div 已正确添加，但当我单击 div 时，我总是收到带有文本的警报："Alert: Div 5"。为什么？我必须改变什么才能产生我所期望的行为？

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

【问题讨论】：

标签： javascript jquery dom onclick

【解决方案1】：

在这种情况下你应该使用closure:

(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/

【讨论】：

请注意，您正在为每次迭代创建一个新的函数对象，当有大量迭代时，这可能会导致性能问题。在这种情况下，声明的函数会提供更好的性能。
哦，我明白了。我不知道这个词。谢谢你的时间！我会尽快接受。
@FabrícioMatté 同意您的第一个注释。对于这种情况，也许eventData 是一个不错的选择。

【解决方案2】：

又是一个经典的闭包案例。 i 不断增加，而您希望将其锚定在 click 事件中。试试这个：

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

【讨论】：

哦，我明白了。我不知道这个词。谢谢你的时间！它现在工作=D

【解决方案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);
}

【讨论】：

【解决方案4】：

当Alert 发生时，变量i 已经设置为5。

【讨论】：

【解决方案5】：

.click 在与你的循环不同的范围内工作，当你的点击处理程序被执行时它是undefined，除非你在全局范围内有另一个 i 变量。

【讨论】：

【解决方案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.

【讨论】：