Ajax 分页仅在第一次和第三次有效答案

【问题标题】：Ajax pagination works only first and third timesAjax 分页仅在第一次和第三次有效
【发布时间】：2013-02-24 18:40:10
【问题描述】：

我正在使用基于 ajax 的分页，这是标记

<div id="portfolio-thumbs">
    <ul id="portfolio-destaque">
        HERE GOES MY LOOP AND CONTENT , some LI's with thumbs and stuff   
    </ul>
</div>
<div id="pagi-container">
    <div id="paginar">
        <?php posts_nav_link(); ?> 
    </div>
</div>

<?php posts_nav_link(); ?> 呈现如下：

<div id="pagi-container">
    <div id="paginar">
        <a href="http://localhost/paulo/page/2/" >next Page &raquo;</a>  
    </div>
</div>

然后，我使用这个 jquery 来加载分页链接：

$('#paginar > a').on('click',  function(e){
    e.preventDefault();
    var link = jQuery(this).attr('href');
    jQuery('#portfolio-thumbs').html('Loading...');
    jQuery('#portfolio-thumbs').load(link+' #portfolio-destaque');
    jQuery('#pagi-container').load(link+' #paginar');   
});

当我单击下一页链接时，它会加载 #portfolio-thumbs 内的内容，并带有 ok 标记，唯一的区别是加载此内容的 #pagi-container：

<div id="pagi-container">
    <div id="paginar">
        <a href="http://localhost/paulo/">« Prev Page</a> — 
        <a href="http://localhost/paulo/page/3/">Next Page »</a>  
    </div>
</div>

此时，Jquery 不再工作。如果我单击任何分页链接，它会加载整个页面......在下一页中，它仅加载 1 个分页链接，它可以正常工作。我的猜测是，不知何故，我的 jquery 只使用 1 个#paginar a，当链接超过 1 个时会中断……但我不确定……有人知道吗？

【问题讨论】：

那么您认为问题出在哪里？
Wordpress 在 noConflict 模式下加载 jQuery - 您对 $.on() 的调用可能会导致问题。
它在一个 jQuery(document).ready(function ($) 里面，即使这样也只能在第一页上工作
另外，我尝试使用 .click() 而不是 .on() 并且它仅适用于第一页和最后一页（只有一个分页链接）
将第二页精简为一个链接，看看问题是否已解决。

标签： jquery wordpress

【解决方案1】：

这是因为您正在更改#paginar 的内容，所以链接上的事件被清除了。根据您的 jquery 版本，您可以使用.live() 或将事件添加到#pagi-container：

$('#pagi-container').on('click','#paginar > a',function() {... }

【讨论】：