jquery无限滚动“重置”答案

【问题标题】：jquery infinite scroll "reset"jquery无限滚动“重置”
【发布时间】：2011-10-29 00:54:10
【问题描述】：

我正在为网站使用无限滚动 jquery 插件 (https://github.com/paulirish/infinite-scroll)

一切都很好，除了我的页面是搜索所以......发生的事情是：

1) 您进入页面，浏览器会自动定位您并返回您周围的项目列表（例如条形图）...需要无限滚动以避免此列表分页。直到这里一切正常……除了我可以到达“无限页的末尾”并且插件从滚动中“解除绑定”本身。

2) 现在....当您想在输入文本中手动插入地址时，您可以随意...您写下您的地址，然后按回车...并使用 ajax (没有页面刷新）...我会寻找纬度/经度，找到地址，更改无限滚动的导航链接....而且，我觉得很愚蠢，但我无法弄清楚将插件“重新激活”或“重新绑定”到事件的方法......所以我的“新搜索结果”没有新的“无限滚动”实例......

（页面“拆分”正确并正确返回一个尝试更改“page=NUMBER”的json）

这就是控制台中发生的事情：

["math:", 0, 468]
jquery.infinitescroll.min.js:20["heading into ajax", 
Array[2]
    0 : "/ajax/getCoworkings/?page="
    1 : "&latitude=52.5234051&longitude=13.4113999&distance=12"
    length : 2
    __proto__ : Array[0]
]
jquery.infinitescroll.min.js:20["Using JSON via $.ajax() method"]
jquery.infinitescroll.min.js:20["Error", "end"]
jquery.infinitescroll.min.js:20["Binding", "unbind"]

在“解除绑定”之后，我无法再次绑定它，因此在我的下一个搜索结果中会无限滚动......

【问题讨论】：

标签： jquery ajax infinite-scroll jquery-infinite-scroll

【解决方案1】：

infinitescroll 通过$.data将其所有实例数据存储在元素本身上，因此删除该实例数据是完全重置无限滚动的唯一可靠方法。

这两行应该可以彻底摧毁无限滚动。

$elem.infinitescroll('destroy');
$elem.data('infinitescroll', null);

// 现在无限滚动可以正常重新初始化，而不会与前一个实例产生任何冲突或杂乱无章。

请注意，截至 2012 年 6 月，之前的答案都不适用于我最新版本的 jquery.infinitescroll (v2.0)

【讨论】：

我也在使用 v2，这是唯一对我有用的解决方案。
对于 2019 年阅读本文的其他人。当我使用 $elem.infiniteScroll('destroy'); 和 $elem.data('infiniteScroll', null); 时，这仅适用于 v3.0.5。区分大小写。

【解决方案2】：

解决了。

我已经添加：

if (xhr == 'destroy') {
    $.removeData(this.element[0]);
}

在函数中

_error: function infscr_error(xhr) {

在第 228 行。

这可能不是最好的方法，但这正是我所需要的。

而我现在所做的基本上就是您的建议：

1.

$("#myelement").infinitescroll("destroy");

2.

$("#myelement").infinitescroll(WHATEVER_SETTINGS);

...无需修改“pathParse”值
但那是因为我正在修改选择器 (next/nav)
之前，使用 jQuery。

【讨论】：

我还必须评论这一行 //$(opts.navSelector).hide();，为了让它正常工作，它为 opts.pixelsFromNavToBottom 提供了不正确的结果，因为我们隐藏了元素，如果您之前创建过一次插件，这无关紧要，但在我们的例子中，它创建的次数不止一次，并导致像素从导航到底部的值错误
注意：截至 2012 年 6 月，此解决方案似乎不再有效。

【解决方案3】：

这里没有提到，但是（无论如何在我的 Infinite Scroll 版本中）您还必须设置两个变量才能使 InfiniteScroll 的重新实例化工作。您还必须重新绑定它。代码如下：

$('#cardContainer').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');

【讨论】：

【解决方案4】：

在尝试其他解决方案无济于事后，这对我有用：

$(window).unbind('.infscr');

参考 1/4 的文档：http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

【讨论】：

【解决方案5】：

我不得不做类似的事情，因为我的代码会根据用户操作而不是仅仅依靠计数器来更新目标 URL。

我最终实现了以下重置方法，然后我可以使用 $container('reset'); 调用它

reset: function infrscr_reset() {
        this.options.state.isDone = false;
        this.options.state.isDuringAjax = false; // I needed this, others may not
        this._resetmsg();
        this._binding('bind');
    },

我还实现了一个私有方法来重置悬停消息，否则它会继续给出“没有更多页面”通知。

_resetmsg: function infscr_resetmsg() {
        var opts = this.options;
        opts.loading.msg = $('<div id="infscr-loading"><img alt="Loading..." src="' + opts.loading.img + '" /><div>' + opts.loading.msgText + '</div></div>');
        this._debug('Reset loading message');
    },

【讨论】：

【解决方案6】：

假设您创建了无限滚动，例如：

//This will initiate with default values for example purpose
$("#myelement").infinitescroll();

你能不能简单地彻底销毁实例：

$("#myelement").infinitescroll("destroy");
//Reset anything else that may cause the page to blow up here
//And then create a new instance with different path variables:
//Note, obviously you'll be initializing it with custom selectors/settings etc so include those as well
$("#myelement").infinitescroll({pathParse:["/ajax/getCoworkings/?page=","&latitude=52.5234051&longitude=13.4113999&distance=12"]});

基本上，如果您不定义 pathParse，脚本会尝试自行解决。如果你这样做，那么它会使用你提供的东西。它不是很优雅，更像是一种 hack，但更改 pathParse 目前在无限滚动中不受严格支持。

【讨论】：

这没有帮助，我仍然遇到同样的问题，在 "destroy" 之后也没有新的 ".infinitescroll()" :-|
啊，removeData() 函数的想法很好。我认为它需要被带入插件的破坏功能。这很困难，因为您实际上是在尝试从实例本身内部销毁实例！
这条评论是否与我的回答相关但放错了地方？ :P

【解决方案7】：

第 3 项）

if (xhr == 'destroy') {
    $.removeData(this.element[0]);

}

效果也不好。至少使用最新版本。石工抱怨 '不能在初始化之前调用砌体上的方法；试图调用方法'reload''

$container.css('display','none');
$container.html(htmlOutput).imagesLoaded( function(){
             $container.css('display','block');
             $container.masonry('reload');
});

// I have to do this in order to "reset" the stage
$container.infinitescroll('destroy'); // Destroy

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

// Init.
$container.infinitescroll({
   navSelector  : '#page-nav',    // selector for the paged navigation 
   nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
   itemSelector : '.tile',     // selector for all items you'll retrieve
   loading: {
     finishedMsg: '',
     msgText: '',
     img: url + 'img/ajax-loader.gif'
   }
},
// trigger Masonry as a callback
function( newElements ) {
    // hide new items while they are loading
    var $newElems = $( newElements ).css({ opacity: 0 });
    // ensure that images load before adding to masonry layout
    $newElems.imagesLoaded(function(){
        // show elems now they're ready
        $newElems.animate({ opacity: 1 });
        $container.append($newElems).masonry('appended', $newElems, true); 
    });
 }
);

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

【讨论】：

【解决方案8】：

您只需将以下代码添加到无限滚动声明中即可。

errorCallback : function() {
    isc.getContainer().infinitescroll('destroy');
    $.removeData(this);
},

注意不在infinitescroll.js 文件中，它应该在您的自定义无限滚动声明中。

【讨论】：