AJAX調用後重新初始化jScroll？ （靜態加載舊的href AJAX負荷後）

Question

我分頁搜索結果從AJAX調用返回與jScroll：

$('#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，而不是裝載/search?query=B&page=2從新HREF，它會加載從舊HREF /search?query=A&page=3。

顯然，從ajax成功函數調用jscroll（）將不會重構它，並且_nextHref保持設置爲其舊值。我試圖加載它之前破壞它，但它會繼續它完全加載FOM：

$('#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 */ 
    }); 
}); 

能否請你給我一個例子，如何來所以它加載新的HREF重新初始化jScroll？

Answer 1

我發現通過註釋掉以下行的臨時解決方案：

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

這引起了進一步的問題。如果結果列表適合單頁（無分頁需要所以第一個沒有HREF頁，「正在加載...」顯示在列表的底部，因爲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的proper fork允許它在每個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功能，傳遞相同的參數，當您首先初始化它（在這個例子中，我定義了兩個配置參數，但是使用你需要的）。更好的是，將其納入其自身的功能中，以免重複代碼。