1

简介：我目前正在开发一个 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">&times;</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

4

0 回答 0