Ajax评论教程？Ajax功能有效，但添加了4次。为什么？

Question

我对AJAX有一个奇怪的情况。我的问题是，我正在尝试使用AJAX实现注释，它很有效，但并不完全有效。我会解释的。

我有以下代码用于我的AJAX注释：

$(document).ready(function(){
$('#new_comment').on('submit',function(event){
event.preventDefault();

var $form = $(event.currentTarget);

$.ajax({
  type: 'POST',
  url: $form.attr('action'),
  dataType: 'json',
  data: $form.serialize(),
  success: function(response) {
    var $commentAuthor = $('<h4>').text(response.author);
    var $commentBody = $('<p>').text(response.body);
    var $comment = $('div').addClass('comment').append($commentAuthor,$commentBody);
    var $commentFeed = $('.comment-feed');
    $commentFeed.append(comment);
  },
  error: function() {
      alert('Something was wrong with your comment. Try again');
    }
  });
 });
});

当我创建一个评论时，我的终端通过rails s告诉我这个评论是使用JSON创建的，这在某种意义上是很好的。如下所示：

tarted POST "/posts/4/comments" for 127.0.0.1 at 2014-05-19 23:32:59 -0400
Processing by CommentsController#create as JSON

这很奇怪，因为当我创建一条评论时，AJAX会以某种方式创建4条评论，但元素检查器确认网页只有一条评论。如果我发表更多的评论，那就更糟了。当我检查我的rails控制台时，它还确认数据库中有一个注释，而不是4个。最后，当我刷新页面时，重复的内容就会消失。

我在Stackoverflow上对此进行了研究，并尝试插入这行代码。

 $('#new_comment').unbind('on').on('submit',function(event).......

但这似乎也不起作用。我不确定问题是什么，但任何帮助都会有帮助。谢谢。

这是取自我的帖子展示页面：

<h1><%= @post.title %></h1>

<%= simple_format @post.body %>

<h3>Comments</h3>

<%= simple_form_for [@post, @comment] do |f| %>
 <%= f.input :author %>
 <%= f.input :body %>
 <%= f.button :submit %>
<% end %>

<div class="comment-feed">
 <% @post.comments.each do |post| %>
 <div class="comment">
  <h4><%= post.author %></h4>
  <p><%= post.body %></p>
 </div>
<% end %>
 </div>

Answer 1

$("div")对你没有任何好处。该表达式选择页面上的所有现有div，然后添加注释类，等等。

如果您想用HTML语言创建一个新元素，最好将其作为jQuery片段传入：$("<div></div>")