jQuery ajax分頁在第二次單擊后停止工作

Question

我目前正在做一些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();
            }

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

這對前兩頁效果很好。 在第二頁之后，jquery元素停止工作，並且默認返回到正常分頁？

誰能知道為什么會這樣嗎？

Answer 1

除非此代碼位於#content包含的內容中的<script>標記內，否則將發生動態加載的內容中的鏈接沒有單擊綁定的情況。

您可能需要重新應用點擊綁定：

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

當然，那么您必須定義一個合適的函數來綁定。 否則，您需要再次編寫相同的代碼...

用偽代碼有點駭人聽聞：

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); 

});