简介:我目前正在开发一个 Ruby on Rails 项目并使用 ajax 加载评论。评论包含一张图片,当点击它时,它会在叠加层上以更大的尺寸显示。它还有一个可点击的图标,显示带有表单的叠加层。
问题:前三个评论(未加载 AJAX)按预期工作,但是当我单击“更多”以通过 AJAX 加载更多评论时,评论会加载图标及其各自的图像,但点击时不显示叠加层
注意:在 AJAX 调用后,前三个评论仍然显示覆盖。我读过基础似乎是通过重新绑定事件来解决的问题,但它适用于旧版本的基础。我正在使用最新版本 6.3
宝石
宝石'导轨','4.2.6'
宝石'咖啡轨','〜> 4.1.0'
宝石'jquery-rails'
宝石“涡轮链接”
宝石'基础导轨'
gem 'will_paginate', '~> 3.1', '>= 3.1.5'
主页.html.erb
<div id="the-reviews" class="medium-push-2">
<% @reviews.each do |review| %>
<%= render 'reviews/review', review: review %>
<% end %>
</div>
<% if not(@reviews.empty?) and @reviews.next_page %>
<div class="row">
<div id="infinite-scrolling-home" class="space small-12 medium-6 medium-push-1 float-left columns">
<%= will_paginate @reviews %>
</div>
</div>
<% end %>
<div class="row">
<div class="small-12 columns">
<div id="load_more_reviews" class="space button">More</div>
</div>
</div>
<%= 渲染“评论/评论”,评论:评论 %>
<div class="row">
<div id="review-item" class="small-12 medium-6 medium-push-1">
<div class="upper-pad row">
<div class="small-4 columns">
<%= avatar_profile_link review.user, "medium", class: 'circle-picture' %>
</div>
<div id="who-review" class="small-8 small-pull-1 large-pull-2 text-center columns">
<h6><%= review.user.first_name %></h6>
<p>Reviewed</p>
<% if review.artist.present? %>
<h6 class="truncate"><%= review.artist.name %></h6>
<% else %>
<h6 class="truncate"><%= review.email %></h6>
<% end %>
</div>
</div>
<div id="review-content" class="under-pad b-border row">
<div class="small-12 columns">
<%= render 'star_rating', review: review %>
</div>
<div class="small-12 medium-8 columns">
<h6><%= review.title %></h6>
<p><%= review.comment%></p>
</div>
<div class="space small-12 medium-4 columns">
<%= image_tag review.image.url(:thumb), class: "review-image" %>
</div>
<div class="reveal" id="flag-overlay-<%= review.id %>" data-reveal>
<%= render template: 'flags/_form', locals: { review_id: review.id } %>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="small-12 text-center columns">
<i data-open="flag-overlay-<%= review.id %>" class="fa fa-flag fa-2x" aria-hidden="true"></i>
</div>
</div>
</div>
主页.js.erb
$(document).ready( function() {
$('#the-reviews').append('<%= j render @reviews %>');
<% if @reviews.next_page %>
$('.pagination').replaceWith('<%= j will_paginate @reviews %>');
$('.pagination').hide();
<% else %>
$('.pagination, #load_more_reviews').remove();
<% end %>
});
家.咖啡
callInfiniteScroll = ->
if $('#infinite-scrolling-home').size() > 0
$('.pagination').hide()
loading_posts = false
$('#load_more_reviews').show()
$('#load_more_reviews').on 'click', ->
$this = $(this)
$this.html('<i class="fa fa-spinner fa-pulse" aria-hidden="true"></i>')
return
$('#load_more_reviews').bindWithDelay 'click', ->
unless loading_posts
loading_posts = true
more_posts_url = $('.pagination a[rel="next"]').attr('href')
$this = $(this)
$this.html('<i class="fa fa-spinner fa-pulse" aria-hidden="true"></i>')
$.getScript more_posts_url, ->
$this.text('More').removeClass('disabled') if $this
loading_posts = false
return
, 1000
$(document).on 'turbolinks:load', callInfiniteScroll $(document).ready callInfiniteScroll