Question

我写了一个代码。我的元素目前不存在。代码是

jQuery('a.feedSearchClear').on('click',function(evt){
  console.log('coming here');
  var intId = window.setInterval(function(){
   if(jQuery('#feedSortDropDownElement').parent().find('ul').find('a').length > 0) 
{     window.clearInterval(intId);
      jQuery(".feedSortMenuContainer").prepend(menu_html);
     reRenderMenu();

}
},1000);

});

当我出现时点击该按钮。它没有显示控制台日志意味着没有调用方法。谁能解释为什么？

Answer 1

正在发生的是您将绑定直接应用于所选元素：

$("a.example").on("click", do_stuff);

在上面，您说“jQuery，在页面上找到a类的所有example标记，并应用此click绑定”。您的案例中的问题是您还没有页面上的元素。

您可以通过将绑定放在祖先节点（层次结构上方的任何节点）并让它为您处理事件来解决此问题。最简单的方法是使用body标记，如下所示：

$("body").on("click", "a.example", do_stuff);

现在，您说，“jQuery，只要在a标记中点击类example的{{1}}标记，就可以了这个东西“。

您基本上是告诉body标签代表子节点侦听事件，即使当时该子节点不存在。

Answer 2

将事件委托给动态添加的元素的父或委托给document

jQuery(document).on('click', 'a.feedSearchClear',function(evt){
  console.log('coming here');
  var intId = window.setInterval(function(){
    if(jQuery('#feedSortDropDownElement').parent().find('ul').find('a').length > 0) 
    {  
       window.clearInterval(intId);
      jQuery(".feedSortMenuContainer").prepend(menu_html);
       reRenderMenu();

     }
   ,1000);    
});

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序reference。

在jquery 1.10中使用on function而不是live

2 个答案: