AJAX Rebinding events

Question

Introduction: I'm currently working on a Ruby on Rails project and using ajax to load reviews. A review contains an image, when clicked it is shown with a bigger size on an overlay. It also has a clickable icon that displays an overlay with a form.

Problem: The first three reviews (Not loaded with AJAX) work as desired, but when I click "more" to load more reviews via AJAX, the reviews get loaded with the icon and it's respective image, but overlays are not displayed on click

Note: After the AJAX call the first three reviews still display the overlay. I've read that foundation seems to be the problem wich is solved with rebinding the events, but it works with older versions of foundation. I'm using the latest version 6.3

gems

gem 'rails', '4.2.6'

gem 'coffee-rails', '~> 4.1.0'

gem 'jquery-rails'

gem 'turbolinks'

gem 'foundation-rails'

gem 'will_paginate', '~> 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>

<%= render 'reviews/review', review: review %>

<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 'turbolinks:load', callInfiniteScroll $(document).ready callInfiniteScroll