简单的Wordpress AJAX分页

小编典典

简单的Wordpress AJAX分页

ajax

我正在使用下面的循环+ 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>

阅读 307

2020-07-26

共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);
            });
        });
    });
});

2020-07-26