Ajax调用在rails中重复

Question

我想用Ajax调用发表评论表。

# app/views/comments/index.html.erb
<div id="comment_section">
  <%= render @comments %>
</div>
<%= form_for(@comment, remote: true) do |f| %>
  <%= f.input :contents %>
<%= f.submit %>

# app/vies/comments/_comment.html.erb
<p><%= comment.content %></p>

# app/controllers/comments_controller.rb
def create
  @comment = Comment.create(comment_params)
  respond_to do |format|
    format.js
  end
end

# app/views/comments/create.js.erb
$("#new_comment").bind("ajax:success", function(){
  $("#comment_section").prepend("<%= j render 'comment', locals: { comment: @comment } %>");
});

我认为这很简单，没有机会出现任何错误。当我第一次提交表单时（例如contents =＆＃34; a＆＃34;），它没有出错，只有一个注释被添加到comment_section中。但是当我在那之后提交表格时（例如内容=＆＃34; b＆＃34;，contents =＆＃34; c＆＃34;），它总是先于之前创建的评论。

第一次（提交内容=＆＃34; a＆＃34;）

• a（在comment_section中）

第二次（提交内容=＆＃34; b＆＃34;）

• B'/ LI>
• a（我不知道为什么会出现）
• a（首次创建的）

第3次（提交内容=＆＃34; c＆＃34;）

• C
• b（它再次出现）
• a（再次发生）
• B（第二）
• 的（第二）
• a（第一个）

发生了什么事？ Log只是说只有一个查询和一个渲染用于新评论。刷新页面后，它显示正确。

刷新后

• C
• B'/ LI>
• 一个

我错过了什么？我不太了解jQuery和Ajax所以我怀疑turbolink会为此做出一些错误。（只是我自己的猜测）任何评论对我都有很大的帮助，谢谢！

Answer 1

您可能正在重复调用绑定事件。 （添加控制台日志以进行检查）

无需绑定ajax：success事件。 （试着理解为什么你甚至插入它，因为你不需要）。您的远程.js将转到“create.js.erb代码”，因此请尝试删除绑定事件，并单独使用$（）.prepend代码行。