JQuery 分页问题

Question

好的，所以我正在尝试制作一个包含三个部分的系统。菜单、内容区域和分页区域。这些区域中的每一个，不包括菜单，都是在运行时通过 jquery 的 .load 调用加载的。顺便说一句，我是作为一个 wordpress 插件来做的。

例如在加载时，我通过 .load 将 posts.php 加载到 .content 类中，通过 .load 将 page.php 加载到 .pagination 类中。这一切都是通过默认设置完成的，即我通过 post 加载方法发送默认设置。菜单代码从一开始就在那里。

问题在于分页。我想要它，所以当您单击下一页时，它会加载下一个内容并将页面向上移动到分页系统上，而无需在 wordpress 中再次加载整个页面。我认为 jquery 可以在这里工作，但问题是如果我将分页称为 jquery 调用，当用户单击下一页时，检测必须嵌套在第一个分页调用中，对吗？这是因为一个巨大的循环。

所以问题是如何制作一个分页系统，它将调用下一个内容并将其加载到内容区域并在自己的系统中将页面向上移动，而不必再次加载整个页面，因为它是一个插件在 wordpress 中。

有什么帮助吗？

编辑： 我想指出我对 jQuery 比较陌生。

Answer 1

假设您的 load() 返回的数据如下所示：

<ul>
    <li>item1</li>
    <li>item2</li>
</ul>
<div id='pagination'> 
    1 
    <a href='/path/to/this/page?page=2'>2</a>
    <a href='/path/to/this/page?page=3'>3</a>
</div>

您可以在将所有 <a> 标签加载到特定 div 后修改它们，如下所示：

$('#mymenu').load('/path/to/this/page?page=1', function(){
    setAjaxLinks();
});

并且有一个函数setAjaxLinks 定义如下：

$('#mymenu').find('a').click(function(event){
    event.preventDefault();
    $('#mymenu').load($(this).attr('href'), function(){
        setAjaxLinks();
    });
    return false;
});

setAjaxLinks 函数的关键在于它设置了一个函数，用于在单击链接时执行的操作。即：

1. 为下一页发送 AJAX 请求并将其加载到页面上的适当位置。

2. 在响应中找到分页链接，并将它们的click 事件替换为我们希望分页链接执行的操作，即...

   A.发送 AJAX 请求.. 和

   B.在响应中找到分页链接，并将其click 事件替换为....

所以我们最终得到了一个递归的setAjaxLinks 调用。