jQuery：绑定悬停事件与通过Ajax加载的内容

Question

jQuery：绑定悬停事件与通过Ajax加载的内容

9

我正在使用jQuery尝试将一些新加载的<li>元素与.hover()绑定，但我有点卡住了。目前，我正在使用ajax在<ul>中重新加载内容，并且有一个带有.hover();的悬停事件在<li>上。当然，非ajax加载的内容上的悬停事件完美地工作。

我知道我可以使用mouseover/mouseout通过.live();绑定事件，这是一个很好的解决方案，如果不是因为mouseover/mouseout会打破事件，如果您悬停在当前元素的子元素上，则该事件将被取消。因此，我使用.hover();的原因是我可以自由地悬停在我的悬停绑定元素的子元素上，而不会取消事件。

bind();似乎根本不起作用，所以我的问题是..是否有任何用处来尝试获取ajax加载的<li>事件绑定并将悬停效果保持为hover();，或者我应该使用mouseover/mouseout和live();并尝试解决悬停子元素问题？

成功信息：

success: function(data){ 
           $('ul#list').bind().append("<li>test test</li>");
         }

- Nokka

你能展示一下在 AJAX 成功事件中如何重新绑定吗？ - redsquare

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- redsquare · Accepted Answer

bind（绑定）的工作方式类似于这个。例如

$('#list').bind('mouseover', function(){})

然而，我认为你需要做的就是调用与文档首次加载时绑定事件时相同的函数。如果这在文档准备好的块内部，则将其提取为一个函数，并在文档准备好和ajax成功事件中调用同一函数。

例如：

$(document).ready( function(){

   bindHover( $('#list>li') )

   $.ajax({ success: function(data){
                         bindHover( data.find('li') );
                     },
            url: bla
   });

})

function bindHover($liList){
  $liList.hover( fn, fn )
}