Rails：在filterrific之后加載Jquery Infinite Pages

Question

我正在使用Rails， jquery無限頁面 ，kaminari和filterrific來允許用戶過濾和無限滾動電影預告片列表。

無限滾動通過等待，直到用戶在分頁div的X像素內滾動，然后使用AJAX將下一個X預告片添加到父div。

<div class="pagination">
  <a rel="next" data-remote="true" href="link-to-next-page"></a>
</div>

頁面首次加載時，無限滾動工作正常。 但是如果用戶首先過濾，則無限滾動不再起作用。 這是用戶過濾時調用的JS：

<% js = escape_javascript(
  render 'trailers/list', trailers: @trailers
) %>

$("#filterrific_results").html("<%= js %>");
$(".infinite-table").append('<div class="pagination"><%=j link_to_next_page(@trailers, '', :remote => true) %></div>')

和HTML ...

<div class="infinite-table">

  <div class="trailers text-center" id="filterrific_results">
    <div class="trailers-container">
      <%= render 'trailers/list', trailers: trailers %>
    </div>
    <div class="pagination">
      <%= link_to_next_page(trailers, '', :remote => true) %>
    </div>
  </div>

  <div class="clearfix"></div>


</div>

拖車/ _list.html.erb：

<% trailers.each_with_index do |trailer, index| %>
  <%= render "/trailers/trailer", trailer:trailer, index: index %>
<% end %>

在用戶過濾后，我可以看到第一組過濾后的預告片正按預期加載到預告片容器中。 我還可以看到$（“。pagination”）存在。

但出於某種原因，當我滾動到頁面底部時......無限滾動無效。

我的直覺告訴我它與我動態加載分頁div的方式有關，也許它沒有正確綁定，因此沒有事件監聽器？

有任何想法嗎？

Answer 1

根據我們對非常類似問題的理解，您對元素綁定的評估是正確的。 加載filterrific_results時，元素完成重寫，在此上下文中，綁定未知（最有可能僅在頁面加載時完成）。 當index.js.erb更新div時，我們通過重新綁定修復了這個（以一種不太優雅的方式）（請注意'toggle'是我們的問題，相當於無限表）：

<% js = escape_javascript( render(partial: 'enrollments/list', locals: { enrollments: @enrollments }) ) %>
$("#filterrific_results").html("<%= js %>");
console.log('after filterrific trigger');
$('.toggle')
    .bind('change', toggle_change)
    .bind('blur', toggle_blur);

附錄：請注意，toggle_change和toggle_blur函數必須在全局范圍內。 我們相應地修改了咖啡腳本，以便可以使用這些方法。