AJAX 调用后重置/禁用无限滚动

Question

我正在使用无限 ajax 滚动 (https://github.com/webcreate/infinite-ajax-scroll) 带有过滤功能的插件。我的过滤器可以使用无限滚动，但我的问题是，每当滚动到达一个过滤器的结果末尾时，即使选择了另一个过滤器，它也将不再滚动。因此，我需要在选择过滤器时重置无限滚动，但我在文档中找不到有关如何重置它的任何地方，并且对 JQuery 不是很好，因此无法解决这个问题。

我也有某些过滤器不需要初始滚动，并且还需要一种方法来为它们禁用它。

$('.filter a').click(function() {
    //reset scroll somehow
    //setTimeout("jQuery.ias({container: '#container'})",1000);
    var $this = $(this);
    var URL = $this.attr('href');
    loadMoreItems(URL, $this);
});
return false;
});

jQuery.ias({
    container: '#container', // main container where data goes to append
    item: '.element', // single items
    pagination: '.paginate', // page navigation
    next: '.paginate a', // next page selector
    loader: '<img src="public/img/ajax-loader.gif"/>', 
    noneleft: 'No more discounts for your selection', 
    triggerPageThreshold: '10', 
    trigger: "Load more items",
    history: false, 
    thresholdMargin: -350
});

Answer 1

其他have had the same issue as you;根据作者的说法，目前无法干净地重新初始化 IAS。

所以你的选择似乎是

1) 通过removing the event handlers 硬重置插件并在每次过滤器更改时再次调用jQuery.ias({...})

2) 切换到不同的库。该错误报告中的用户wrote his own - 也许他的解决方案对您有用

Answer 2

就像 janfoeh 所说，没有什么可以正确地重新初始化插件。您应该从窗口中取消绑定滚动并再次调用元素上的 init。

我建议您将您的初始化封装到一个函数中，以使重新初始化变得容易。

$('.filter a').click(function() {
    $(window).unbind('scroll');
    initscroll();
});

function initscroll(){
    jQuery.ias({
        container: '#container', // main container where data goes to append
        item: '.element', // single items
        pagination: '.paginate', // page navigation
        next: '.paginate a', // next page selector
        loader: '<img src="public/img/ajax-loader.gif"/>', 
        noneleft: 'No more discounts for your selection', 
        triggerPageThreshold: '10', 
        trigger: "Load more items",
        history: false, 
       thresholdMargin: -350
    });
}
initscroll();

所以你必须在加载和过滤时调用initscroll。

Answer 3

从 Infinite Ajax Scroll 的第 2 版开始，设计了一种新方法来处理此类问题。调用新方法 destroy() 作为 unbind() 的别名，您将解除 IAS 与任何窗口或文档事件的绑定。之后您可以重新绑定 IAS 对象。

$('.filter a').click(function() {
    setTimeout(function() { 
      ias.destroy(); 
    }, 1000);

    var $this = $(this);
    var URL = $this.attr('href');
    loadMoreItems(URL, $this);

    ias.bind();
});  

类似的东西，没有测试。您可以在http://infiniteajaxscroll.com/docs/methods.html查看此方法