简单的 Wordpress AJAX 分页 [英] Simple Wordpress AJAX pagination

问题描述

我正在使用下面的循环 + jQuery 来加载下一组页面，并且它在第一次点击时起作用，但是当加载下一个页面并且我点击较新的帖子"时，它会重新加载整个页面.有什么想法吗?

<?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="分页"><?php next_posts_link('« 旧条目', $new_query->max_num_pages) ?><?php previous_posts_link('Newer Entries &raquo;') ?>
</div><!-- #content --><脚本>$('#pagination a').on('click', function(event){event.preventDefault();var link = $(this).attr('href');//获取href属性$('#content').fadeOut(500, function(){ });//淡出内容区域$('#content').load(link + '#content', function() { });$('#content').fadeIn(500, function(){ });//淡入内容区});

解决方案

您正在使用 jQuery 的 load() 方法插入内容，这是 $.ajax 的快捷方式code>，当然是动态插入内容.

动态内容需要将事件委托给非动态父级，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);});});});});

I'm using the loop + jQuery below to load in the next set of pages, and it works on the first click, but when the next page is loaded in and I click on "newer posts" it reloads the whole page. Any ideas?

<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>

解决方案

You're using jQuery's load() method to insert content, which is a shortcut for $.ajax, which of course inserts the content dynamically.

Dynamic content requires delegation of the events to a non-dynamic parent, something jQuery makes easy with 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);
            });
        });
    });
});

这篇关于简单的 Wordpress AJAX 分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！