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>

拖车/ _list.html.erb：

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

用户过滤后，我可以看到第一组过滤后的预告片按预期加载到预告片容器中。我还可以看到$（＆＃34; .pagination＆＃34;）存在。

但出于某种原因，当我滚动到页面底部时...无限滚动无效。

我的直觉告诉我这与我动态加载分页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函数必须在全局范围内。我们相应地修改了咖啡脚本，以便可以使用这些方法。

Rails：在filterrific之后加载Jquery Infinite Pages

1 个答案: