如何使用 ajax 和 jQuery 在循环中渲染部分内容？

Question

我尝试使用 ajax 和 jquery 来呈现部分点击。详情请见Is it possible to render partial onclick without link_to?

它可以工作，部分被渲染但它不能正常工作。

我已经将link_to 放在一个循环中，但是当点击“新评论”时，它会出现在第一个帖子上，当我点击第二/第三/第四个帖子上的“新评论”时，所有部分在第一篇文章中得到了渲染。到底是怎么回事？

请看下面我的代码。

发布/index.html.erb

<% @posts.each do |post| %>

   <%= post.title %>

   <%= post.content %>

   <%= link_to 'New Comment', new_comment_path, id: 'new_comment', remote: true %>

<% end %>

评论/new.js.erb

$('#new_comment').hide().after('<%= j render("form") %>')

_form.erb

<%= form_for(@comment) do |f| %>

  <div>
    <%= f.label :body %><br>
    <%= f.text_area :body %>
  </div>

  <div>
    <%= f.submit %>
  </div>

<% end %>

Answer 1

您对所有元素（帖子和新评论按钮）使用相同的 ID，因此当您单击 新评论 按钮时，所有部分都会在第一个帖子上呈现。因为它是找到的第一个匹配元素。 您应该为您的帖子使用不同的元素 ID，以便在单击新评论时您会知道在哪里（我的意思是哪个帖子）呈现表单。 例如，您可以使用这样的计数器：

<%= link_to 'New Comment', new_comment_path, id: 'new_comment_' + i++, remote: true %> 那么您所要做的就是传递元素 id 并更改以下行： $('#'+PassedElementId).hide().after('<%= j render("form") %>')