jQuery 简单的 Wordpress AJAX 分页
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15983244/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple Wordpress AJAX pagination
提问by Phillip Rauschkolb
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?
我正在使用下面的循环 + 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>
回答by adeneo
You're using jQuery's load()method to insert content, which is a shortcut for $.ajax, which of course inserts the content dynamically.
您正在使用 jQuery 的load()方法插入内容，这是 的快捷方式$.ajax，当然是动态插入内容。
Dynamic content requires delegation of the events to a non-dynamic parent, something jQuery makes easy with on()
动态内容需要将事件委托给非动态父级，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);
});
});
});
});
回答by Matt
I used adeneo's solution, with a couple of minor tweaks.
我使用了 adeneo 的解决方案，并进行了一些小调整。
- My pagination was outside of the container that I wanted to load
, so I performed a separate call for the pagination content. Per the comments, I've updated the code to make a single Ajax call, filtering on the returned data to retrieve and update the desired elements. - My pagination consisted of all links, even for the current page. There was no point in doing an Ajax request if the clicked element is the active page, so I added logic to target only pagination links whose parent list item element did not have the
.disabledclass. - The page jumped every time I loaded new content because it was using fadeOut/In (which sets
display: none;once the opacity animation is complete). Instead, I manually animate the opacity, which limits the amount of height fluctuation.
- 我的分页在我想要加载的容器之外
，所以我单独调用了分页内容。根据评论，我更新了代码以进行单个 Ajax 调用，过滤返回的数据以检索和更新所需的元素。 - 我的分页包括所有链接，即使是当前页面。如果单击的元素是活动页面，则执行 Ajax 请求没有意义，因此我添加了逻辑以仅定位其父列表项元素没有
.disabled该类的分页链接。 - 每次我加载新内容时页面都会跳转，因为它使用了淡入淡出（
display: none;在不透明度动画完成后设置）。相反，我手动为不透明度设置动画，这限制了高度波动的量。
Here's the updated code:
这是更新后的代码：
$('#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
);
}
);
});
});
