简单的 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 »') ?></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('« Older Entries', $new_query->max_num_pages) ?>
<?php previous_posts_link('Newer Entries »') ?>
</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屋!