1

我关注了 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（十个对象同时分页）

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
4

1 回答 1

0

这是因为 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();
  }
});
于 2013-06-20T19:43:24.907 回答