简单的WordPress的AJAX分页(Simple Wordpress AJAX paginati

我使用的是循环+ jQuery的下方在接下来的网页加载，它适用于第一次点击，但在接下来的页面加载和我点击“新帖”重新加载整个页面。有任何想法吗？

<div id="content">
    <?php
$new_query = new WP_Query();
$new_query->query('post_type=post&showposts=1'.'&paged='.$paged);
?>

<?php while ($new_query->have_posts()) : $new_query->the_post(); ?>
<?php the_title(); ?>

<?php endwhile; ?>
    <div id="pagination">
    <?php next_posts_link('&laquo; Older Entries', $new_query->max_num_pages) ?>
    <?php previous_posts_link('Newer Entries &raquo;') ?>
    </div>
</div><!-- #content -->

<script>
$('#pagination a').on('click', function(event){
event.preventDefault();
var link = $(this).attr('href'); //Get the href attribute
$('#content').fadeOut(500, function(){ });//fade out the content area
$('#content').load(link + ' #content', function() { });
$('#content').fadeIn(500, function(){ });//fade in the content area

});
</script>

Answer 1:

您正在使用jQuery的load()方法插入内容，这是一条捷径$.ajax ，这当然动态插入的内容。

动态内容需要事件非动态父的代表团，东西jQuery让容易on()

jQuery(function($) {
    $('#content').on('click', '#pagination a', function(e){
        e.preventDefault();
        var link = $(this).attr('href');
        $('#content').fadeOut(500, function(){
            $(this).load(link + ' #content', function() {
                $(this).fadeIn(500);
            });
        });
    });
});

Answer 2:

我用adeneo的解决方案，与几个小的调整的。

我的分页是想装入容器的外面~~，所以我进行了分页内容单独调用~~ 。按照意见，我已经更新了代码，使一个Ajax调用，过滤返回的数据检索和更新所需的元素。
我的分页包括所有链接，即使当前页面。有中，如果点击的元素是在活动页面做一个Ajax请求是没有意义的，所以我说的逻辑只指定的父列表项元素没有分页链接.disabled类。
该页面跳下每次我因为它使用了淡出/在加载新的内容时（设置display: none;一旦不透明度动画完成）。相反，我手动动画的不透明度，这限制了高度的波动的量。

下面是更新后的代码：

$('#content').on('click', '#pagination :not(.disabled) a', function(e){
    e.preventDefault();
    var link = $(this).attr('href');
    $.post( link, function( data ) {
        var content = $(data).filter('#content');
        var pagination = $(data).filter('#pagination');
        $('#pagination').html(pagination.html());
        $('#content').animate(
            {opacity: 0},
            500, 
            function(){
                $(this).html(content.html()).animate(
                    {opacity: 1},
                    500
                );
            }
        );
    });
});

文章来源: Simple Wordpress AJAX pagination