Question

我已经使用jQuery一两周了，我注意到它与原始HTML文档中的对象一起正常工作，但是当我使用jQuery生成一个新元素时，库没有得到任何它的事件。

假设我尝试运行这样的东西：

$('.whatever').click(function() {
  alert("ALERT!");
});

如果HTML确实有这样的内容：

<span class="whatever">Whatever</span>

然后点击Whatever这个词就会给我一个很好的提醒。

但如果使用jQuery动态添加span元素，则单击它时不会发生任何事情。

有没有办法让jQuery以某种方式使用这些元素？

Answer 1

那是因为： <子>（校正）

$('.whatever').click(function() {
  alert("ALERT!");
});

用字面意思表示：

Find all elements currently on the page that have the class ".whatever"
Foreach element in that result set, bind this function to its click event

很自然地，添加新的DOM元素不会自动应用点击。

解决此问题的最佳方法是在插入阶段创建绑定，即：

  var x = document.createElement("span"); 
  $(x).click(function(){ });  //etc 
  $(somcontiner).append(x);

警告简单地重新绑定所有内容

如果做错了，它可能会导致不良影响，即使事件触发事件增加的次数。要停止此操作，您可能需要首先取消绑定它们以删除先前的通行证绑定。

即，

$(x).click(foo); 
$(x).click(bar);  //foo and bar should both execute.

所以要停止这个，你需要

$(x).unbind("click");
$(x).click(foo);

重新绑定。

Answer 2

如果你有jQuery 1.3或更高版本，请尝试使用live向动态生成的元素添加事件：

$('.whatever').live("click", function() {
  alert("ALERT!");
});

Answer 3

谢谢大家。

不知怎的，我认为jQuery只需将它们添加到任何地方就可以自动将元素添加到DOM中。

我还发现了一些关于这个主题的额外信息：

http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_stop_working_after_an_AJAX_request.3F

http://learningjquery.com/2008/03/working-with-events-part-1

http://learningjquery.com/2008/05/working-with-events-part-2

以防其他人需要它。

Answer 4

你需要重新绑定它。

function bindme(){
    $('.whatever').click(function(){
        alert('binded');
    });
};

bindme();

//function that will generate something

function foo(){
   $('.whatever').val('oryt');
   bindme();//rebind itagain
}

Answer 5

另请参阅reglib，这是一个类似的库，允许您正在寻找的编程风格。

Answer 6

此外，还有一个非常出色的jQuery插件可以解决这个问题，称为livequery

jQuery与动态生成的元素

6 个答案:

警告简单地重新绑定所有内容