Infinite Ajax Scroll：只加載一頁，然后停止工作

Question

我正在嘗試在 Bootstrap 模式中實現無限 ajax 滾動。

這是模態的樣子（還沒有加載任何數據）：

<div class="modal fade" id="modal" tabindex="-1">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-body">
            <div class="infinite-messages-scroll">

            </div>
         </div>
      </div>
   </div>
</div>

當顯示模態時，我將第一頁數據加載到模態中，然后初始化infinite-ajax-scroll ：

$(document).on('show.bs.modal', '.modal', function(event) {
    var modal = $(this);
    var modalBody = modal.find('.modal-body');

    $.ajax({
        url: 'http://www.website.com/messages',
        type: 'get',
        dataType: 'html',
        success: function(html) {
            modalBody.find('.infinite-messages-scroll').append(html);

            var infiniteScroll = $.ias({
                container: '.messages-container',
                item: '.message',
                pagination: '.pagination',
                next: '.pagination li.active + li a',
                delay: 0,
                negativeMargin: 500
            });

            infiniteScroll.on('loaded', function(data, items) {
                var html = $(data);

                $('.modal-body').find('.messages-container').append(html.closest('.messages-container').html());
            });
        }
    });
});

這是請求新頁面時來自服務器的響應的樣子：

<div class="messages-container">
   <div class="message">Message1</div>
   <div class="message">Message2</div>
   <div class="message">Message3</div>
   <div class="message">Message4</div>
   <div class="message">Message5</div>
</div>
<ul class="pagination">
   <li class="disabled"><span>&laquo;</span></li>
   <li class="active"><span>1</span></li>
   <li><a href="http://www.website.com/messages?page=2">2</a></li>
   <li><a href="http://www.website.com/messages?page=3">3</a></li>
   <li><a href="http://www.website.com/messages?page=4">4</a></li>
   <li><a href="http://www.website.com/messages?page=5">5</a></li>
   <li><a href="http://www.website.com/messages?page=6">6</a></li>
   <li><a href="http://www.website.com/messages?page=7">7</a></li>
   <li><a href="http://www.website.com/messages?page=2" rel="next">&raquo;</a></li>
</ul>

因此，當加載下一頁時，我會在loaded事件（上圖）中捕獲它，並將新消息附加到模式的.message-container 。

問題是，當我向下滾動時，它只會加載下一頁（第 2 頁）。 在那之后，它停止工作（即如果我繼續向下滾動，它不會加載另一個頁面）。

我做錯了什么？

Answer 1

您當前已將 IAS 綁定到窗口。 嘗試使用以下方法綁定到溢出 div：

$('.infinite-messages-scroll').ias({ /** your options )*/})

查看溢出示例： https : //infiniteajaxscroll.com/examples/overflow.html