Rails: Jquery无限页面不能在文件之后加载

Question

我使用Rails、jquery infinite pages、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>

trailers/_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时重新绑定，如下所示(请注意，“切换”是我们的问题，相当于无限表)：

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