javascript - rails : Javascript does not work on paginated objects

Question

我关注了 Ryan Bates Railscast #114(revised) ，并向我的页面添加了无限滚动。 JavaScript 适用于最初的前十个对象(加载站点时加载的前十个对象)，但问题是 JavaScript 不适用于滚动时加载的其余对象(分页对象)。

有人知道我该如何解决这个问题吗？

.js(这是一个虚拟的 js 示例，只是为了说明:前十个对象上会有边框，其余的则不会)

$ ->
  $(".thumbnail").css "border-width": "2px"

.css

.thumbnail {
    border-style: solid;
    border-color: #ee2a7c;
    border-width: 0px;
}

ma​​in_view.html.erb

<div class="container" id="sp">
   <%= render 'pages/singlePost' %>
</div>
<div class="row">
   <div class="span6 offset3">
      <%= will_paginate @posts %>
   </div>
</div>

_singlePost.html.erb

<% @posts.each do |p| %>
   <div class="row">
      <div class="span6 offset3">
        <div class="thumbnail">
           <%= p.title %>
            /*Some other code goes in here*/
        </div>
      </div>
   </div>
<% end %>

ma​​in_view.js.erb

$('#sp').append("<%= j render 'pages/singlePost' %>");
<% if @posts.next_page %>
    $('.pagination').replaceWith('<%= j will_paginate(@posts) %>');
<% else %>
    $('.pagination').remove();
<% end %>

controller.rb(同时分页十个对象)

def lelist
   @post = Post.new
   @posts = Post.where("DATETIME(created_at) <= DATETIME(?)", Time.now).order("created_at DESC").page(params[:page]).per_page(10)
end

Answer 1

这是因为 javascript 是在页面加载时加载并执行的，如果执行 javascript 时元素不存在，它们显然不会受到它的影响。

我认为你的示例是捏造的，因为你当然不需要也不应该使用 javascript 以这种方式应用 CSS。

如果您想将事件附加到将来可能存在的元素，请考虑使用事件委托(delegate) .on() 。例如:

$('body').on('click', '#some_element', function() {
  // ...
});

如果您想做一些其他事情，请将其放入函数中，并确保每次加载新数据时都执行该函数。例如:

var doSomeStuffWhenDataLoads = function() {
  // do whatever you want to do, apply your CSS or whatever.
}
// do it on page load.
doSomeStuffWhenDataLoads();

// ...
$.ajax({
  // ...
  success: function() {
    // insert your new data to the page
    doSomeStuffWhenDataLoads();
  }
});