我正在尝试动态添加按钮,并添加一个jQuery甚至监听它们。 但是,我遇到了Javascript的范围问题(至少我认为是这样)。
这几乎是我的代码
for (var item in group) {
$('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
$('#id' + item).click(function() {
alert("Hello from " + item);
});
}
现在的问题是,无论我点击哪个按钮,事件回调中的警报总是使用最后一项。
现在我明白为什么会发生这种情况(好吧,粗略地说:P),但我该如何解决呢?
由于
答案 0 :(得分:4)
正确实现这一目标的一种方法就是这样
for (var item in group) {
$('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
(function(item){
$('#id' + item).click(function() {
alert("Hello from " + item);
});
})(item);
}
的jsfiddle
答案 1 :(得分:1)
您可以使用jQuery的$ .each方法以相同的方式迭代组数组,但这将为您解决问题:
$.each(group,function(i,v){
$('div').append("<input type='button' value='" + v + "' id = 'id" + v + "'>");
console.log($('#id' + v))
$('#id' + v).click(function() {
alert("Hello from " + v);
});
});
答案 2 :(得分:0)
我会查看使用jQuery Delegate函数。
http://api.jquery.com/delegate/
这会将事件处理程序附加到容器。容器中的所有元素事件都将逐渐扩展到容器,如果处理将触发事件处理程序。
答案 3 :(得分:0)
它适用于我:http://jsfiddle.net/bgt89/但我确实更改了你的处理程序以使用闭包。
var group = ['asdf', 'rere', 'eeeee']
$(document).ready(function() {
for (var item in group) {
$('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
$('#id' + item).click((function(item) {
return function() {
alert("Hello from " + item);
}
})(item));
}
});
答案 4 :(得分:0)
简单方法:传递一些event data
:
for (var item in group) {
$('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
$('#id' + item).click({item: item}, function(event) {
alert("Hello from " + event.item);
});
}
或使用event.target
或this
:
for (var item in group) {
$('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
$('#id' + item).click(function(event) {
alert("Hello from " + event.target.id); //or this.id
});
}
答案 5 :(得分:0)
我认为除了在item
语句中使用alert()
变量外,代码中的所有内容都可以。
由于警告在for
循环结束后很长时间运行,警报将看到项目的最后一个值,而不是您想要的值。如果您只想访问当前点击的商品ID,那么您可以从this
参考中获取,而不是将其传入。尝试将代码更改为:
for (var item in group) {
$('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
$('#id' + item).click(function() {
alert("Hello from " + this.id.slice(2));
});
}
在这个jsFiddle中工作:http://jsfiddle.net/jfriend00/uyK3m/
答案 6 :(得分:0)
上面的大部分答案都是正确的,但是unnecessarily verbose。 “这个”是你的朋友。
for (item in group) {
$('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
$('#id' + item).click(function() {
alert("Hello from " + this.id.slice(2) );
});
}
答案 7 :(得分:0)
Harmen,
为什么不是你的jquery的实时功能。
它允许你使用jquery选择器将一个函数绑定到一组对象上的事件就像$('#button')。click()但是也允许将来添加的新元素也可以工作点击事件。这符合您的动态要求。
请参阅下面的示例。我使用live函数将click事件绑定到类'testButton'的所有元素。然后获取值使用$(this)上的attr('value'),因为这是单击的元素。
var group = ["Test 1", "Test 2", "Test 3"];
for (var item in group) {
$('div').append("<input class='testButton' type='button' value='" +item+ "'>");
}
$('.testButton').live('click', function(e) {
alert('Hello Im From ' + $(this).attr('value'));
});
Jquery Live Function:http://api.jquery.com/live/
工作示例:http://jsfiddle.net/bbP64/12/
希望有所帮助。