AJAX分页只在第一次和第三次有效

时间:2013-02-24 作者:user1576978

我正在使用基于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>
然后,我使用这个jquery将内容加载到#portfolio-thumbs 和内部分页链接#pagi-container:

  $(\'#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\');

    });
嗯,当我点击> Next Page 这是第一次加载page/2 好的,里面#portfolio-thumbs 转到循环帖子,标记保持不变,除了< previous page 添加在内部的链接#pagi-container
如果我再次单击,jquery/ajax将无法工作,并且会完全加载page/3, 正在重新加载浏览器的窗口。。如果,英寸page/3 我单击<previous page> next-page ajax再次正常工作。。。。知道我做错了什么吗?

1 个回复
SO网友:user1576978

@stackoverflow中的kennypu用以下方法救了我的命:

因为你正在更改#paginar, 因此,链接上的事件正在被清除。根据jquery版本的不同,您可以使用。live()或将偶数添加到#pagi容器:

$(\'#pagi-container\').on(\'click\',\'#paginar > a\',function() {... }
我完成的代码如下:

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

    });
谢谢kennypu!

结束