Question

我正在建立一个Q＆amp; A网站，在那里可以评论问题及其答案。这是一个带有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（再次），它将匿名函数再次绑定到所有表单对象。即在一次提交之后，每个表单都有两个绑定到提交事件的函数，两个提交后，三个等等。

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

也许是这样的（我不知道这是否有效，我在Javascript / jQuery中表现不佳）：

修改

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

编辑2：

如何更改HTML结构。只需在注释和表单周围包含另一个div，然后替换它的内容。这绝对有用。像
这样的东西
<div class="new_around_comments"> <div class="comments"></div> <div class="commentFormWrapper">  </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); });

django：使用jquery动态插入注释表单

2 个答案: