销毁 AJAX 页面上的无限滚动更改

Destroying InfiniteScroll on AJAX page change

本文关键字:无限 滚动 AJAX 销毁      更新时间:2023-09-26

我们有一个运行jQuery无限滚动插件的网站。该插件不再维护,但它是唯一真正正确服务于我们目的的插件。但是,我遇到的问题是我们的网站是基于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 调用并显示加载栏。

我想问题可能是插件将事件绑定到自身外部的元素上。如果没有进一步的调试,很难说(插件是否被删除或未能删除?如果是这样,为什么无法取消绑定事件?等。

当你说"在另一个页面上"时,我想你没有加载一个全新的页面(这会"重置"javascript。

但是,根据这是否适合您,您可能需要尝试取消绑定文档上的所有事件,然后重新开始。

$(document).add('*').off();

应该这样做。如果是这样,您可以尝试查明需要手动取消绑定的元素/事件。让我知道这是否有效。