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

Question

我正在建立一个问答网站，人们可以在其中评论问题及其答案。它是一个带有 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

为每个表单分配一个#id，并使用这个id而不是'this'

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

Answer 2

问题是，当success 函数被调用时，你会再次调用bindPostCommentHandler，这会将匿名函数再次绑定到所有表单对象。 IE。一次提交后，每个表单都有两个函数绑定到提交事件，两次提交后，三个等等。

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

大概是这样（不知道行不行，我的Javascript/jQuery不是那么好）：

编辑：

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

编辑 2：

改变你的 HTML 结构怎么样。只需将另一个 div 包裹在 cmets 和表单周围并替换它的内容即可。这绝对应该有效。类似的东西

<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);
});