将 jquery-ias 与异步加载的内容一起使用

Question

我已经成功地将 jQuery Infinite Ajax Scroll 插件集成到 my development site 中 - 它被使用了两次，第一次在左侧的线程列表中，第二次在加载单个主题时 - 但我遇到了麻烦第二个ias 实例在这里。

基本上一个topic的内容是通过$.get加载然后渲染到页面中的，然后我在JS中触发setupThreadDetailDownwardScroll()创建了一个ias的实例：

var iasDetail = jQuery.ias({
    container:  "#reply-holder",
    item:       ".post",
    pagination: ".threaddetail-pagination",
    next:       ".load-next-inner-link a",
    delay:      2000,
  });

  if (iasDetail.extension) {
    iasDetail.extension(new IASPagingExtension());
    iasDetail.extension(new IASTriggerExtension({
      text: 'More Replies', 
      html: '<div class="scroll-pager"><span>{text}</span></div>',
      offset: 10,
    }));
    iasDetail.extension(new IASNoneLeftExtension({html: '<div class="scroll-message"><span>No more replies</span></div>'}));
    iasDetail.extension(new IASHistoryExtension({
        prev: '.load-previous-inner-link a',
    }));
  }

  iasDetail.on('load', function() {
    $('#reply-holder').append(scrollLoading);
  })

  iasDetail.on('rendered', function() {
    $('.scroll-loading').remove();
    iasDetail.unbind();
  })

但问题是这仅适用于您加载的第一个主题 - 您将在第一个线程中获得工作分页，但是当您打开下一个线程时它将回退到锚链接。

所以我认为一旦插入了这个新内容，我需要重新绑定 ias，这就是为什么我在 rendered 中添加了 unbind() 调用，然后在加载另一个线程时重新调用 setupThreadDetailDownwardScroll() .这也不起作用。

这里有正确的程序吗？

Answer 1

您正在使用绑定到$(window) 的滚动事件的jQuery.ias(...)。在您的情况下，您可能希望绑定到溢出 div。因此，您应该像这样指定滚动容器：

$('#scrollContainer').ias(...)

编辑：

根据您的评论，我又看了一遍，可能已经找到了答案。当您调用 jQuery.ias({...}); 时，IAS 会设置并等待 $(document).ready 初始化。您说您想在 setupThreadDetailDownwardScroll 函数中初始化 IAS。您可以尝试使用以下代码自己初始化 IAS

 iasDetail.initialize();