使用 WordPress 进行 jQuery 分页答案

【问题标题】：jQuery pagination with WordPress使用 WordPress 进行 jQuery 分页
【发布时间】：2014-05-09 06:02:28
【问题描述】：

当分页在目标 div (class="blog-roll") 之外时，我试图让 jQuery 加载 WordPress 分页

当分页位于 div (class="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>

我认为它与 $(this) 有关，但即使我将其更改为 $(".blog") 它仍然不起作用。该脚本看起来应该可以工作，因为它针对的是正确的项目。无论如何，任何帮助将不胜感激。

【问题讨论】：

你原来的分页在'.pagination'里面，然后你在做什么来'把它拉出来'？我做了一个JSFiddle。请编辑尽可能接近原文：jsfiddle.net/Lzbgq
就是这样！当分页 div 和链接在 blog-roll div 内时，它可以工作，而当它们在 div 之外时，就像你在 jsfiddle 中一样，它会失败。 WP 分页有效，但我得到的是页面跳转而不是过渡。
是的，但是如何复制按钮？如果您使用 .clone() 来执行此操作，请尝试使用 .clone(true) 来复制侦听器。

标签： jquery wordpress pagination

【解决方案1】：

这个怎么样。我的分页也在内容 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

【讨论】：