jQuery与动态生成的元素

Question

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

假设我尝试运行这样的事情:

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

如果HTML确实有这样的东西:

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

然后点击这个词Whatever给我一个很好的警报.

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

有没有办法让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!");
});