我在这里有一个测试页

Question

我正在一个我想实现无限滚动的网站上工作。我找到了IAS插件，除了一个实例外，它工作得很好。如果我使用jQuery .load（）函数将新内容加载到div中，则无限滚动停止工作。

<script type="text/javascript">

  $(document).ready(function() {

    var ias = $.ias({
      container:    '#load_here',
      item:       'p',
      pagination: '#nav',
      next:       '#nav a'
    });

    $("#reload").click(function(){
      event.preventDefault();

      $("#test").load( "page0.html #load_here", function() {

        // Reinitialize the infinite scrolling here.

      });
    });
  });

</script>

以下是IAS插件的文档： http://infiniteajaxscroll.com/docs/overview.html

我发现以下似乎相关的问题，但似乎没有明确的答案 - 我道歉他们不是链接，Stack Overflow不会让我发布超过2个链接：

stackoverflow.com/questions/24419462 /
stackoverflow.com/questions/25205507 /
stackoverflow.com/questions/20404493 /
github.com/webcreate/infinite-ajax-scroll/issues/68

它讨论了销毁功能，但在我尝试提出似乎什么都不做的解决方案时。我是一个业余爱好者程序员，我担心我可能根本无法理解正确实现这一点所需的结构或语法。

我在这里有一个测试页

http://designforfun.com/flatfile/experiments/scroll/

无限滚动成功加载第1,2和3页。如果单击顶部的链接以使用jQuery .load（）加载页面0，则无限滚动停止工作。它应该向下滚动并再次加载第1,2和3页。

谢谢。

Answer 1

我不确定为什么会发生这种情况，但是从运行代码开始，我看到在$("#test").load(...之后，ias使用的滚动事件处理程序不再触发。

解决方案应该是在加载完成后重新初始化无限滚动：

$("#test").load( "page0.html #load_here", function() {

  // Reinitialize the infinite scrolling here.
  var ias = $.ias({
    container:  '#load_here',
    item:       'p',
    pagination: '#nav',
    next:       '#nav a'
  });

});

然而，这不起作用，因为$.ias()通过记忆这个方法，用＆＃34; ias＆＃34;来分配数据，试图成为幂等的。全局窗口对象的关键。

似乎ias的制造商给了我们一个解决这个问题的漏洞，尽管没有记录。您可以将字符串"destroy"传递给$.ias()并删除已记忆的数据，允许我们再次调用它并重新安装滚动侦听器。（https://github.com/webcreate/infinite-ajax-scroll/blob/master/src/jquery-ias.js#L553）

以下是生成您期望的结果代码：

var ias;

function setupIAS() {
  ias && $.ias('destroy');
  ias = $.ias({
    container:    '#load_here',
    item:       'p',
    pagination: '#nav',
    next:       '#nav a'
  });
}

$(document).ready(function() {

  setupIAS();

  $("#reload").click(function(){
    event.preventDefault();

    $("#test").load( "page0.html #load_here", function() {

      // Reinitialize the infinite scrolling here.
      setupIAS();

    });
  });
});

在jQuery .load（）之后重新启动无限Ajax Scroll

我在这里有一个测试页

1 个答案: