Javascript AJAX重新绑定事件

简介：我目前正在从事一个RubyonRails项目，并使用ajax加载评论。评论包含一个图像，当单击它时，它会以较大的尺寸显示在覆盖图上。它还有一个可点击的图标，显示一个表单覆盖

问题：前三条评论（未加载AJAX）按预期工作，但当我单击“更多”通过AJAX加载更多评论时，评论会加载图标及其相应的图像，但单击时不会显示覆盖图

注意：在AJAX调用之后，前三个评论仍然显示覆盖。 我读到，基金会似乎是通过重新绑定事件来解决的问题，但它与旧版本的基金会起作用。我使用的是最新版本6.3

宝石

gem“轨道”，“4.2.6”

gem“咖啡轨”，“~>4.1.0”

gem'jqueryrails'

gem“涡轮链接”

gem“基础轨道”

gem'将分页'，'~>3.1'，'>=3.1.5'

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>

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

更多

<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

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

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

$（文档）.ready（函数（）{
$（“#评论”）。附加（“”）；
$（'.pagination'）。替换为（''；
$（'.pagination'）.hide（）；
$（'.pagination，#加载#更多"评论'）.remove（）；

}))

家里。咖啡

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

callInfiniteScroll=->
如果$（'#无限滚动主页'）.size（）>0
$（'.pagination'）.hide（）
加载帖子=错误
$（“#加载更多评论”）.show（）
$（“#加载#更多#评论”）。单击->
$this=$（this）
$this.html（“”）
返回
$（“#加载#更多评论”）.bindWithDelay“单击”，->
除非装上U柱
加载帖子=真
更多帖子\u url=$（'.pagination a[rel=“next”]'）。attr（'href'）
$this=$（this）
$this.html（“”）
$.getScript更多帖子\u url，->
$this.text（'More'）.removeClass（'disabled'）如果$this
加载帖子=错误
返回
, 1000

$（文档）。在“TurboLink:load”上，callInfiniteScroll $（document）.ready callInfiniteScroll

您不必使用

$（document）.ready

在

js.erb

模板中-如果用户单击了链接，文档就非常准备就绪…您不必使用

$（document）.ready

在

js.erb

模板中-如果用户单击了链接，文档就非常准备就绪。。。