AJAX調用后重新初始化jScroll？ （在AJAX加載后仍然加載舊的href）

Question

我正在使用jScroll對從AJAX調用返回的搜索結果進行分頁：

$('#search').keyup(function() {
    var search = $(this).val();
    $.get('/search', {search : search}, function(results) {
        $('.scroll-table').html(results);
        $('.scroll-table').jscroll();
    });
});

進行新搜索后，當我滾動到底部時，jScroll會加載舊搜索的最后一個href的內容。

因此，如果我的舊_nextHref是/search?query=A&page=3並且我在搜索字段中輸入B，而不是從新的href加載/search?query=B&page=2 ，它將加載/search?query=A&page=3來自舊的href。

顯然從ajax成功函數調用jscroll（）將不會重建它並且_nextHref保持設置為其舊值。 我嘗試在加載它之前將其銷毀，但它會完全加載它：

$('#search').keyup(function() {
    var search = $(this).val();

    $('.scroll-table').jscroll.destroy();

    $.get('/search', {search : search}, function(results) {
        $('.scroll-table').html(results);
        $('.scroll-table').jscroll();  /* now jScroll won't load at all */
    });
});

能否請您舉例說明如何重新初始化jScroll以便加載新的href？

Answer 1

我通過注釋掉以下行找到了一個臨時解決方案：

// if (data && data.initialized) return;

這引起了另一個問題。如果結果列表適合單個頁面（不需要分頁，因此第一頁上沒有href，“Loading ...”顯示在列表的底部，因為jScroll想要GET "/undefined"來自服務器。這是我如何修復它：

// Initialization
if (_nextHref != 'undefined') {
    $e.data('jscroll', $.extend({}, _data, {initialized: true, waiting: false, nextHref: _nextHref}));
    _wrapInnerContent();
    _preloadImage();
    _setBindings();
} else {
    _debug('warn', 'jScroll: nextSelector not found - destroying');
    _destroy();
    return false;
}

我不知道是否有更好的方法來做到這一點，但現在它適用於AJAX調用，因為我希望它能夠工作。 如果有人知道重新初始化插件的正確方法，請與我們分享。

更新：我創建了一個正確的jScroll 分支 ，允許它在每個AJAX負載上重新初始化，防止它加載舊的href，使用：

$('.scroll').jscroll({
    refresh: true
}); 

希望此功能在主版本中合並。

Answer 2

如果您不想修補jScroll，可以清除load （或get ）回調中的jScroll數據：

var pane = $('#myInfiniteScroll');
pane.load(url, function() {
        pane.data('jscroll', null);
        pane.jscroll({
                    nextSelector: "link[rel='next']",
                    autoTrigger: true,
                  });
    });

調用jscroll函數時，傳遞與第一次初始化時相同的參數（在本例中，我定義了兩個配置參數，但使用了您需要的參數）。 更好的是，將其分解為自己的功能，這樣您就不會最終復制代碼。