在Ajax中使用Infinite Scroll jQuery插件

Question

我正在做一個類似於Google Reader的項目。

我正在使用Infinite Scroll jQuery插件，該插件的功能與查看默認選定類別（在可滾動div中）的內容完全相同。

但是，當選擇另一個類別（或Google Reader的文件夾）並將該類別的內容與ajax一起加載到與上述相同的div容器中（基本上完全類似於Google Reader）並向下滾動到第2頁時，就會出現問題將會移動到以前選擇+1的任何頁面，而不是選擇新類別時從頭開始。

我認為基本上我需要一種在選擇新類別時重置插件的方法。 任何幫助非常感謝。

Answer 1

我意識到這是一個非常普遍的問題。 我希望找到一個做過類似事情的人。

無論如何，這可能不是最佳選擇，但我這樣解決了。

我將此功能添加到了可以從插件外部調用的插件中：

this.resetPlugin = function() {
  $(document).unbind('retrieve.infscr',kickOffAjax);
  props.currPage = 1;
};

我這樣加載插件

window.infinitescroll = $('#content').infinitescroll({usual settings});

比選擇其他類別時，我可以重設它：

window.infinitescroll.resetPlugin();

Answer 2

您的回答對我沒有用。 這是我做的：

您必須設置兩個變量才能使InfiniteScroll生效。 您還必須重新綁定它。 這是代碼：

$('#myContainer').infinitescroll('destroy'); // Destroy

// Undestroy
$('#myContainer').infinitescroll({                      
    state: {                                              
        isDestroyed: false,
        isDone: false                           
}
});

InitInfiniteScroll(); // This is a wrapper for the standard initialization you need

// Re-initialize
$('#myContainer').infinitescroll('bind');

Answer 3

僅這對我有效，可能此解決方案已過時：

jQuery無限滾動“重置”

Answer 4

如果有人遇到類似的問題，只想用我的答案做出貢獻。

var off = 0;
var infinite = {};


function loadMorePosts(cat, offset){
            //FUNKY AJAX LOAD
}


function initInfinite(){
    infinite = new Waypoint.Infinite({
      element: $('.infinite-container')[0],
      onBeforePageLoad: function() {
        console.log(off);
        var cat = $('.f-categories').val();
        loadMorePosts(cat, off);
        off += 5;
      },
      onAfterPageLoad: function(){
        //console.log($.noop);
      }
    });
}
initInfinite();

$(function() {
    $('.f-categories').change(function(){
        var cat = $(this).val();
        off = 0;
        infinite.destroy();
        $('.grid').html('');
        initInfinite();
        loadMorePosts(cat,off);
    });
});