jquery 悬停和 ajax 分页在一起时出现错误

Question

感谢您的阅读。我的 WordPress 网站上有一些代码，第一个代码在图像上添加了一个覆盖层，其中包含颜色、文章标题和转到项目的链接。第二个代码使用 jQuery 添加 ajax 分页。

问题是我的项目包含图像和 jquery 覆盖工作完美，但是当他们单击调用 ajax 分页的上一个项目链接时，jquery 覆盖停止工作。

我一直在尝试不同的选择，但也许我没有找到解决问题的正确方法。有人知道吗？

提前致谢。

代码：

    // PORTFOLIO HOVER EFFECT   

 jQuery('ul.portfolio-thumbs li').hover(function(){  
         jQuery(".overlay", this).stop().animate({top:'0px'},{queue:false,duration:300});  
     }, function() {  
        jQuery(".overlay", this).stop().animate({top:'190px'},{queue:false,duration:300});  
    });  


    // POSTS NAVIGATION     
    jQuery('#posts-navigation a').live('click', function(e){
        e.preventDefault();
        var link = jQuery(this).attr('href');
        jQuery('#ajax-container').fadeOut(500).load(link + ' #ajax-inner', function(){ jQuery('#ajax-container').fadeIn(500); });
    });

Answer 1

我在同一天找到了解决方案，@BrockAdams 帮助我解决了疑虑。我将代码放在这里是因为它对某人有帮助。

jQuery('ul.portfolio-thumbs li').live('hover', function(event){  
    if (event.type == 'mouseenter') {
          jQuery(".overlay", this).stop().animate({top:'0px'},{queue:false,duration:300});  
        } else {  
         jQuery(".overlay", this).stop().animate({top:'190px'},{queue:false,duration:300});  
         }
     });  


jQuery('#posts-navigation a').live('click', function(e){
        e.preventDefault();
        var link = jQuery(this).attr('href');
        jQuery('#ajax-container').fadeOut(500).load(link + ' #ajax-inner', function(){ jQuery('#ajax-container').fadeIn(500); });
    });

Answer 2

您可以发布您自己问题的答案。

并且，您需要使用 live()^Doc 悬停时，因为分页可能会加载到新的 portfolio-thumbs li 中。

如果没有 live()，这些新的 li 将不会附加任何事件（除非您重新调用 jQuery('ul.portfolio-thumbs li' ).hover 在每个分页事件之后）。
Live 更容易，并且避免了将同一事件侦听器的多个副本附加到元素的陷阱。

而且，是的，您可以在同一页面上使用两个 live() 调用（或多个），不会出现任何问题。