Rails: Javascript不能在分页对象上工作

Rails: Javascript does not work on paginated objects

本文关键字：对象 工作 分页 Javascript 不能 Rails      更新时间：2023-09-26

我遵循Ryan Bates Railscast #114(修订)，并在我的页面上添加了无尽的滚动。Javascript适用于最初的前十个对象(加载站点时加载的前十个对象)，但问题是Javascript不适用于滚动时加载的其余对象(分页对象)。

有人知道我怎么解决这个问题吗?

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

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

. css 

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

main_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 %>

main_view.js.erb 

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

控制器。

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

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

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

如果您想将事件附加到将来可能存在的元素上，请查看使用.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();
  }
});
相关文章：