在 AJAX 页面更改时销毁 InfiniteScroll

Question

我们有一个运行jQuery Infinite Scroll Plugin 的网站。该插件不再维护，但它是唯一真正符合我们目的的插件。但是，我遇到的问题是我们的网站是基于 ajax 的。在页面更改时，pg-changed 触发器会针对窗口触发，这允许我们检查 Infinite Scroll 容器是否存在并启用 Infinite Scroll。如果 Infinite Scroll 容器不存在但 $.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 调用和显示加载栏。

Answer 1

我猜问题可能是插件将事件绑定到自身外部的元素上。没有进一步调试很难说（插件是被删除还是没有这样做？）。如果是这样，为什么它无法解除绑定事件？等等

当您说“在另一个页面上”时，我想您并没有加载一个全新的页面（这会“重置”javascript。

不过，根据这是否适合您，您可能想尝试取消绑定文档上的所有事件，然后重新开始。

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

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