django：使用jquery动态插入评论表单

Question

我正在构建一个Q &一个可以评论问题及其答案的网站。它是一个带有ajax的线程评论系统。

这是JavaScript部分：

function bindPostCommentHandler() 
{ 
    $('.commentFormWrapper form').submit(function() { 
    var current = $(this); 
     $.ajax({ 
      type: "POST", 
      data: current.serialize(), 
      url: "{% comment_form_target %}", 
      cache: false, 
      dataType: "html", 
      beforeSend:function(xhr){ 
       $('.submit', current).html('<img id="preloader" class="va-mid" src="{{MEDIA_URL}}img/indicator.gif" title="processing.." />'); 
       $('#commentError').remove(); 
      }, 
      success: function(html, textStatus) { 
       current.parent().replaceWith(html); 
       bindPostCommentHandler();     
      }, 
      error: function(xhr, textStatus, errorThrown) { 
       $('#commentError').remove(); 
       $('.submit', current).html('<input type="submit" name="submit" class="submit-post small-button" value="Submit" />'); 
       if(xhr.status == 400){ 
        current.before('<li id="commentError" class="no-bullet errornote margin10">OOPS ! your comment looked liked a spam. Try again with some modifications.</li>'); 
       }else { 
        current.before('<li id="commentError" class="no-bullet errornote margin10">Your comment was unable to be posted at this time. You may try after sometime.</li>'); 
       } 

      //bindPostCommentHandler();    

      } 
     }); 
     return false; 
    });   
} 
$(document).ready(function() { 
bindPostCommentHandler(); 
}); 

HTML部分：

<!-- comment form for question --> 
<div class="commentFormWrapper">     
    {% render_comment_form for question %} 
</div> 

<!-- comment form for answers --> 
{% for answer in question.answers.all %} 
<div class="commentFormWrapper">     
    {% render_comment_form for answer %} 
</div> 

问题是，当只有在它的工作原理页面的单一形式顺利。有多种形式的工作，但多次发送请求到服务器（以倍数增长）。

此外，它会更好地动态插入/删除窗体。但是，如果我手动添加表单的html，我会错过注释表单中的csrf标记和时间戳字段。任何人都有解决方案？

Answer 1

的问题是，当success函数被调用，然后调用bindPostCommentHandler（再次），结合了匿名函数再次到所有表单对象。即在一次提交之后，每个表单都有两个绑定到提交事件的功能，两个提交后，三个等等。

因此，您必须更改Ajax函数的success部分，以仅将处理程序添加到响应中包含的表单。

也许是这样的（我不知道如果这个工程，我不是在Javascript/jQuery的好）：

编辑：

你提到的第一个工作。然后代码可能不工作，因为DOM被替换。查看我的更新代码（使用html而不是replace）。

编辑2：

什么改变你的HTML结构。只是围绕评论和表格包装另一个div并替换此内容。这应该肯定有效。喜欢的东西

<div class="new_around_comments"> 
    <div class="comments"></div> 
    <div class="commentFormWrapper"> 
     <!-- Form --> 
    </div> 
</div> 

然后你必须调用两次parent()：

function bindPostCommentHandler(parent) 
{ 
    parent.find('form').submit(function() { 
    var current = $(this); 
     $.ajax({ 
      //... 
      success: function(html, textStatus) { 
       // Edit 2 
       parent = current.parent().parent() 
       parent.html(html); 
       bindPostCommentHandler(parent);   
      }, 
      //... 
     }); 
     return false; 
    });   
} 
$(document).ready(function() { 
var parent = $('.commentFormWrapper') 
bindPostCommentHandler(parent); 
}); 

Answer 2

分配#ID每一个表格，并使用这个ID，而不是“本”

var current_id = $(this).attr("id");