简单的WordPress AJAX分页

我正在使用下面的循环+ jQuery加载下一组页面，它在第一次单击时工作，但是当下载页面加载并点击“更新的post”时，它会重新加载整个页面。 有任何想法吗？

 query('post_type=post&showposts=1'.'&paged='.$paged); ?> have_posts()) : $new_query->the_post(); ?>   
 max_num_pages) ?>  
 
  $('#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 });  

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. 每次加载新内容时页面都会跳转，因为它使用的是fadeOut / In（设置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 ); } ); }); });