jQuery ajax 分页在第二次点击后停止工作答案

【问题标题】：jquery ajax pagination stops working after 2nd clickjQuery ajax 分页在第二次点击后停止工作
【发布时间】：2013-07-30 20:04:41
【问题描述】：

我目前正在处理一些 ajax 分页。这是我的代码：

jQuery(function ($) {

$('#content').on('click', '.navigation a', function (e) {
    e.preventDefault();
    var link = $(this).attr('href');

    $('#content').fadeOut(200, function () {
        $(this).load(link + ' #content', function () {
            $(this).fadeIn(200);

            if ($("#content > div#content").length > 0) {
                $("#content > div#content").unwrap();
            }

        });
    });
});});

这对前 2 页非常有效。在第二页之后 jquery 元素停止工作并默认恢复正常分页？

谁能明白为什么会这样？

【问题讨论】：

e.preventDefault 有什么问题？

标签： jquery ajax pagination

【解决方案1】：

除非此代码在加载到#content 的内容中包含的<script> 标记内，否则动态加载的内容中的链接将没有点击绑定。

您可能需要重新应用点击绑定：

$(...).load(..., function() {
    // ... 
    $('#content').on('click', ...
});

当然，那你必须定义一个合适的函数来绑定。否则你需要再次编写相同的代码......

有点hackish，在伪代码中：

jQuery(function ($) {

    function myPaginator (e) {
        e.preventDefault();
        var link = $(this).attr('href');

        $('#content').fadeOut(200, function () {
            $(this).load(link + ' #content', function () {
                $(this).fadeIn(200);

                if ($("#content > div#content").length > 0) {
                    $("#content > div#content").unwrap();
                }
                $('#content').on('click', '.navigation a', myPaginator);
            });
        });
    });

    $('#content').on('click', '.navigation a', myPaginator); 

});

【讨论】：

上面的js是用