jquery - 简单的 Wordpress AJAX 分页

Question

我正在使用下面的循环 + 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 的解决方案，并进行了一些小的调整。

1. 我的分页在我想要加载的容器之外，所以我对分页内容执行了单独的调用。根据评论，我更新了代码以进行单个 Ajax 调用，过滤返回的数据以检索和更新所需的元素。
2. 我的分页包含所有链接，即使是当前页面。如果单击的元素是活动页面，则执行 Ajax 请求是没有意义的，因此我添加了逻辑以仅针对其父列表项元素没有.disabled该类的分页链接。
3. 每次我加载新内容时页面都会跳转，因为它使用了淡出/入（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
                );
            }
        );
    });
});