关于javascript:jquery click not working as I expected

JQuery .click not working as I expected

我有一个关于jquery中的.click函数的问题。我有这个代码：

1
2
3
4
5
6
7
8

for (var i = 0; i < 5; i++) {
var divTest = $('');
divTest.text("My Div" + i);
divTest.click(function() {
alert("Alert: Div" + i);
});
$('#myTest').append(divTest);
}?

我希望向"mytest"元素添加五个div，对于每个div，onclick函数将显示一个带有相应div编号的警报。

这些分隔符被正确添加，但是当我单击分隔符时，总是收到文本为："Alert: Div 5"的警告。为什么？我必须改变什么才能产生我期望的行为？

这是我的jfiddle:http://jsfidle.net/bkfgm/2/

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

1
2
3
4
5

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

演示：http://jsfiddle.net/bkfgm/4/

另一种选择是在eventData图中通过i：

1
2
3

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

演示：http://jsfiddle.net/bkfgm/11/

相关讨论

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

1
2
3
4
5

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

相关讨论

你也可以试试这个

1
2
3
4
5
6
7
8
9
10
11
12
13

$(function() {
for(var i = 0; i < 5; i++){
var divTest = $('', {
'text':"My Div" + i,
'click':(function(i){
return function(){
alert("Div:" + i);
}
})(i)
});
$('#myTest').append(divTest);
}
});?

演示。

.click在不同于循环的范围内工作，并且在执行单击处理程序时是undefined，除非在全局范围内有其他i变量。

相关讨论

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

相关讨论

这是一个范围问题。另外，这是一个非常常见的问题。

简单的修复：

1
2
3
4
5
6
7
8
9
10
11
12

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

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

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

相关讨论