我正在使用下面的循环+ 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('« 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>
您正在使用jQuery的load()方法插入内容,这是的快捷方式$.ajax,当然可以动态地插入内容。
load()
$.ajax
动态内容需要将事件委派给非动态父对象,而jQuery可以轻松实现 on()
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); }); }); }); });