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;
}

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

controller.rb（当时对10个对象进行分页）

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。

如果要将事件附加到将来可能存在的元素，请查看使用.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();
  }
});

Rails：Javascript不适用于分页对象

1 个答案: