0

谢谢阅读。我的 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); });
    });
4

2 回答 2

2

我在同一天找到了解决方案，@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); });
    });
于 2011-09-17T05:17:10.690 回答
0

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

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

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

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

于 2011-08-05T18:52:08.030 回答