的jQuery分页与WordPress

我试图让当分页是有针对性的div外面的jQuery加载WordPress的分页（类=“博客卷”）时，分页是div（类中的jQuery分页与WordPress

此功能= “blog-roll”），但只要我把它拉出来，jQuery停止工作，当我使用分页时，页面跳转。

这里是我的代码...

<div class="blog-roll"> 
    <wp_query set to global> 
</div> 

<div class="pagination"> 
    <wp pagination> 
</div> 

<script> 
jQuery(function($) { 
    $('.blog-roll').on('click', '.pagination a', function(e){ 
    e.preventDefault(); 
    var link = $(this).attr('href'); 
    $('.blog-roll').fadeOut(200, function(){ 
    $(this).load(link + ' .blog-roll', function() { 
    $(this).fadeIn(200); 
     }); 
     }); 
    }); 
    }); 
</script>

我认为它有事情做与$（本），但即使当我将其更改为$（“博客”）还不行工作。该脚本看起来像应该工作，因为它是针对正确的项目。无论如何，任何帮助将不胜感激。

来源

2014-05-08 phlipinmi

您原来的分页是内部“.pagination”，然后你正在做的事情为‘拉出来’？我制作了一个JSFiddle。请尽可能接近原始地进行编辑：http://jsfiddle.net/Lzbgq/ – dschu

就是这样！当分页div和链接位于blog-roll divs中时，它就会工作，当它们在div之外时，就像你在jsfiddle中那样失效。 WP分页工作，但我得到页面跳转，而不是过渡。 – phlipinmi

是的，但你如何复制按钮？如果使用.clone（）来完成，请尝试使用.clone（true）来复制侦听器。 – dschu

这个怎么样。我的分页也在内容div之外，所以我也加载，以便当前页码得到更新。

<div class="blog">  
    <div class="blog-roll"> 
     <wp_query set to global> 
    </div> 

    <div class="pagination"> 
     <wp pagination> 
    </div> 
</div> 

<script> 
    $('.blog').on('click', '.pagination a', function(e){ 
     e.preventDefault(); 
     var link = $(this).attr('href'); 
     $('.pagination').load(link + ' .pagination'); //load and update your pagination as well since its outside blog-roll 
     $('.blog-roll').animate({ opacity: 0.1 },500, function(){ //opacity prevents page jump 
      $(this).load(link + ' .blog-roll', function() { 
       $(this).animate({ opacity: 1 },500); 
       $("html, body").animate({ 
         scrollTop: $(this).offset().top - 300 }, 400); //I added this in my code since I have pagination at the bottom of 20 posts 
      }); 
     }); 
    }); 
</script>

DEMO

来源

2014-05-08 22:02:28 shubhra

这为我工作，谢谢！ – phlipinmi

的jQuery分页与WordPress

回答

相关问题