动态添加jQuery事件

时间:2011-08-20 15:54:21

标签: javascript jquery javascript-events

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

由于

8 个答案:

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

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

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

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

答案 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.targetthis

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/

希望有所帮助。