Question

我正在尝试动态添加按钮，并添加一个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），但我该如何解决呢？

由于

Answer 1

正确实现这一目标的一种方法就是这样

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

这是一个展示http://jsfiddle.net/reefbarman/bbP64/

的jsfiddle

Answer 2

您可以使用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);
        });
    });

http://jsfiddle.net/ebiewener/byV9X/

Answer 3

我会查看使用jQuery Delegate函数。

http://api.jquery.com/delegate/

这会将事件处理程序附加到容器。容器中的所有元素事件都将逐渐扩展到容器，如果处理将触发事件处理程序。

Answer 4

它适用于我：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));
    }
});

Answer 5

简单方法：传递一些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
    });
}

Answer 6

我认为除了在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/

Answer 7

上面的大部分答案都是正确的，但是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) );
    });
}

Answer 8

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/

希望有所帮助。

动态添加jQuery事件

8 个答案: