我们有一个正在运行的网站jQuery Infinite Scroll Plugin 。该插件不再维护,但它是唯一真正能正确服务于我们目的的插件。然而,我遇到的问题是我们的网站是基于 ajax 的。页面更改时,会针对窗口触发 pg-changed 触发器,这使我们能够检查无限滚动容器是否存在并启用无限滚动。如果无限滚动容器不存在,但存在 $.infscr
,我们将尝试销毁前一个实例。
我遇到的问题是,当更改到另一个页面时,它似乎没有被正确销毁,有时会进行 AJAX 调用,同时显示 infscr 加载栏。这是我用来实例化和销毁插件的代码:
$(window).on('pg-changed', function () {
// delete our infinite scroll
if(typeof $.infscr !== 'undefined') {
$('.snap-inner, .infscr').data('infinitescroll', null);
$('.snap-inner, .infscr').infinitescroll('unbind');
$('.snap-inner, .infscr').infinitescroll('destroy');
$('#infscr-loading').remove();
$.infscr.data('infinitescroll', null);
$.infscr.infinitescroll('unbind');
$.infscr.infinitescroll('destroy');
delete $.infscr;
}
// setup our infinite scroll
if($('.infscr').length) {
$.infscr = $('.infscr').infinitescroll({
// define our navigation selectors
navSelector : 'div.infscr-navigation',
nextSelector : 'div.infscr-navigation A:first',
itemSelector : '.infscr-item',
// allow scrolling an overflowed element
behavior : 'local',
bufferPx : 120,
binder : $('.snap-inner'),
dataType : 'html',
loading : {
msg : null,
selector : '.snap-content',
img : 'data:image/gif;base64,TRIMMED',
msgText : '<span class="infscr-loading">Loading...</span>',
}
}, function (arrayOfNewElems) {
// render background images on our new elements
$(this).renderBgImages();
});
}
});
我真的希望你能帮忙解决这个问题,因为它现在已经成为一个很大的问题,滚动触发,进行 AJAX 调用并显示加载栏。
最佳答案
我猜问题可能是插件将事件绑定(bind)到其自身外部的元素上。如果不进一步调试就很难说(插件是被删除还是失败?)。如果是的话,为什么无法解绑事件?等等
当你说“在另一个页面上”时,我想你没有加载一个全新的页面(这会“重置”javascript。
不过,根据这是否适合您,您可能想尝试解除文档上所有事件的绑定(bind),然后重新开始。
$(document).add('*').off();
应该这样做。如果确实如此,您可以尝试确定需要手动取消绑定(bind)的元素/事件。让我知道这是否有效。
关于javascript - 在 AJAX 页面更改时销毁 InfiniteScroll,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35559562/