在Rails视图中重新定位呈现的表单

Question

我正在创建一个使用bootstrap carousel并禁用自动播放的照片轮播应用程序。每张照片都有标题，描述和图像。每张照片也有多条评论（每张照片都有很多评论：评论和每条评论属于：照片），用户可以添加新评论。评论创作＆amp; display通过AJAX处理（remote：true）。

视图

<div class="bootstrap-example">
  <div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <% @photographs.each_index do |i| %>
        <% if i == 0 %>
          <li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
        <% else %>
          <li data-target="#carousel-example-captions" data-slide-to=<%= i.to_s %> class=""></li>
        <% end %>
      <% end %>
    </ol>
    <div class="carousel-inner">
      <% @photographs.each_index do |i| %>
        <% if i == 0 %>
          <div class="item active">
        <% else %>
          <div class="item">
        <% end %>
        <img src=<%= @photographs.image.url(:high) %>>   
        <div class="carousel-comments">
          <h3> Comments</h3>
          <h4><%= link_to " Add Comment", new_photograph_comment_path(photograph_id: @photographs[i].id), remote: true %></h4>
          <%= render :partial => 'comments', :locals => {comments: @photographs[i].comments} %>
        </div>
      </div>
      <% end %>
    </div>
    <a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>
</div>
<div class="new-comments-area"></div>

以上设置工作正常＆amp;将提交必要的表格来提交创建评论＆amp;将显示添加的内容。然而，表格和评论显示在轮播中。

为了将评论部分移到旋转木马之外，我添加了一个带有“new-comments-area”类的div。使用http://jsfiddle.net/xL9PX/2/作为示例编写了以下javascript

JS

var update_comments;
update_comments = function () {
  $('.carousel').carousel({
    pause: true,
    interval: false
  });
  var comment = $('div.item:nth-child(1) .carousel-comments');
  $('.new-comments-area').html(comment.html());
  comment.css('display', 'none');

  $(".carousel").on('slide.bs.carousel', function (evt) {
    var comment = $('div.item:nth-child(' + ($(evt.relatedTarget).index() + 1) + ') .carousel-comments');
    $('.new-comments-area').html(comment.html());
    comment.css('display', 'none');
  });
};

$(document).ready(update_comments);

使用此部分，“注释”部分将按预期向下移动到“new-comment-area”div，但是当我单击“添加注释”链接时，表单将不再呈现。我可以确认rails服务器＆amp;返回表单。还注意到谷歌Chrome Devtools中的相应XHR请求。这里有什么我想念的吗？