Ajax评论教程? Ajax功能可以工作,但会附加4次。为什么?

时间:2014-05-20 03:38:32

标签: javascript ajax

我对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).......

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

----------------- EDIT --------------------

这取自我的帖子显示页面:

<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>

1 个答案:

答案 0 :(得分:0)

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

如果要使用jQuery创建新元素,则需要将其作为HTML片段传递:$("<div></div>")