jQuery的无限滚动功能“复位”

一切都只是我的网页是一个搜索那么好......发生什么事是：

1）你进入页面，浏览器会自动定位你，并给你一个你周围的项目列表（例如酒吧）......需要无限滚动以避免对此列表进行分页。一切都在这里工作......除了我可以重新访问“无限页面结尾”以及插件从滚动中“解除绑定”的事实之外。

2）现在....当你想手动在输入文本中插入一个地址，你可以自由地做到这一点......你写你的地址，然后按回车......并用ajax（否页面刷新）...我会寻找纬度/经度，找到地址，改变无限滚动的导航链接....和，我觉得愚蠢，但我找不出一种方法来“重新激活“或”重新绑定“插件的事件....所以我的”新的搜索结果“没有一个新的”无限滚动“的实例...

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

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

["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"]

后，“取消绑定”我不能再结合它，因此对我的下一个搜索结果中的无穷远滚动........

来源

2011-10-29 ricricucit

已解决。

我加：

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

在功能

_error: function infscr_error(xhr) {

上线228

也许这不是这样做的最佳方式，但它正是我需要的。

而且我做什么-now-基本上是你的建议：

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

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

...无需修改“pathParse “值
但这是因为我正在使用jQuery修改之前的选择器（next/nav）
。

来源

2011-10-29 15:15:59 ricricucit

我还要评论这一行//$(opts.navSelector）。hide（）;因为它能够正常工作，所以它给opts.pixelsFromNavToBottom提供了不正确的结果，因为我们隐藏了该元素，如果创建插件一次，这并不重要，但是在我们的例子中创建了更多的并导致像素值错误FromNavToBottom –

注意：此解决方案在2012年6月之前不再起作用。 – fisch0920

假设你创造无限滚动像：

//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"]});

ESSENTIA如果你没有定义pathParse，脚本会尝试自行解决它。如果你这样做，它会使用你提供的。它不是非常优雅，更像是一种攻击，除了改变pathParse之外，目前还没有严格支持无限滚动。

来源

2011-10-29 12:10:52 Beaver6813

没有帮助，我还有的同样的问题，在“destroy”之后没有新的“.infinitescroll（）”： - | – ricricucit

啊，用removeData（）函数思考一下。我认为它需要带入插件的销毁功能。它很难，因为有效地你试图从实例本身中销毁实例！ – Beaver6813

这个评论与我的回答有关，但放在了错误的地方？：P – ricricucit

这里没有提到，但是（在我的无限滚动版本中），你还必须设置两个变量来让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');

来源

2012-03-21 16:46:45 zannorman

的第3项）

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

}

没有正常工作。至少在最新版本中。砌体抱怨 '不能在初始化之前调用砌体上的方法;试图调用方法

$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');

来源

2012-05-11 02:37:38 bicatu

我不得不做类似的事情，因为我的代码更新根据用户的行动，而不是仅仅依靠一个计数器的目标网址'重装”。我最终实现了以下重置方法，然后我可以使用$ 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'); 
    },

来源

2012-05-17 21:44:02

infinitescroll存储所有的实例数据元素本身上通过$.data的，所以去除实例数据是唯一可靠的方式来完全复位infinitescroll。

这两行应该干净地销毁infinitescroll。

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

//现在无限滚动可以正常重新初始化，没有任何冲突或从前面的实例中躺下来。

注意，2012年6月的，先前没有答案的工作对我来说与最新版本jquery.infinitescroll的（V2.0）

来源

2012-06-22 07:29:37 fisch0920

我也使用v2，这是唯一对我有用的解决方案。 –

谢谢，你节省了我很多时间。非常感谢... –

则只需添加以下代码到你的无限滚动做到这一点宣言。

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

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

来源

2014-01-13 08:26:08

尝试其他解决方案无果后，这个工作对我来说：

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

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

来源

2014-01-21 01:43:47 spsaucier

谢谢，为我工作... –

jQuery的无限滚动功能“复位”

回答

相关问题