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

我希望将五个 div 添加到“myTest”元素，对于每个 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);

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

---

另一种选择是在 eventData 中传递 i map :

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

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