Question

简介：我目前正在开发Ruby on Rails项目并使用ajax加载评论。评论包含图像，点击时图片在叠加层上显示更大的尺寸。它还有一个可点击的图标，用于显示带表单的叠加层。

问题：前三个评论（未加载AJAX）按预期工作，但是当我点击＆＃34;更多＆＃34;要通过AJAX加载更多评论，评论会加载图标及其相应的图片，但点击时不显示叠加

注意：在AJAX调用之后，前三个评论仍会显示叠加层。我已经读过这个基础似乎是通过重新绑定事件解决的问题，但它适用于旧版本的基础。我使用的是最新版本的6.3

宝石

gem＆＃39; rails＆＃39;，＆＃39; 4.2.6＆＃39;

gem＆＃39; coffee-rails＆＃39;，＆＃39;〜＆gt; 4.1.0＆＃39;

gem＆＃39; jquery-rails＆＃39;

gem＆＃39; turbolinks＆＃39;

gem＆＃39; foundation-rails＆＃39;

gem＆＃39; will_paginate＆＃39;，＆＃39;〜＆gt; 3.1＆＃39;，＆＃39;＆gt; = 3.1.5＆＃39;

Home.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>

＆lt;％=渲染＆＃39;评论/评论＆＃39;，评论：评论％＆gt;

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

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

}）;

Home.coffee

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＆＃39; turbolinks：load＆＃39;，callInfiniteScroll $（document）.ready callInfiniteScroll

AJAX重新绑定事件

0 个答案: