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函数必须在全局范围内。 我们相应地修改了咖啡脚本，以便可以使用这些方法。