视图被调用两次/对象创建两次

Question

我有一个具有 2 个视图的Comment模型：1 个用于家长评论，一个用于回复。父视图工作正常，但由于某种原因，我的回复视图被调用了两次，一次创建 2 个回复对象。因此，首先，这是一个用户单击的.reply按钮，该按钮会调出注释表单，并为该注释表单提供reply_comment() onclick值：

$('.reply').on('click', function(e) {
    var clone = $('.comment_form').clone();
    parent_id = $(this).closest('.comment_div').data('comment_id');
    $(this).closest('.comment_div').after(
        clone
    );
    clone.addClass('reply_comment_form').removeClass('comment_form');
    clone.attr('onclick', 'reply_comment()');
    clone.data('comment_id', parent_id);

    $(this).next().css('display', 'inline-block');
    $(this).css('display', 'none');
    $('.reply_comment_form').css('padding', '1px');
});

这是实际函数：

function reply_comment() {
    $('.reply_comment_form').on('submit', function (e) {
        e.preventDefault();
        parent_id = $('.reply_comment_form').data('comment_id');
        $.ajax({
            type: 'POST',
            url: '/comment_reply/',
            data: {
                reply_text: $(this).find('.comment_text').val(),
                parent_id: parent_id,
                id: path,
                csrfmiddlewaretoken: $("input[name='csrfmiddlewaretoken']").val(),
            },
            success: function(data) {
                $('.reply_comment_form').replaceWith("<div class='comment_div new_comment'><div class='left_comment_div'>" +
                "<div class='username_and_votes'><h3><a href='#' class='username'>" + data.username +
                "</a></h3><span class='upvotes' style='margin: 0 6'>0</span><span class='downvotes'>0</span></div><br><p>" + data.reply_text +
                "</p></div><a href='#'><span class='comment_delete'>x</span></a></div>");
                $('.new_comment').css({
                    'width': '72%',
                    'margin': '0 70 10 0',
                    'float': 'right',
                });
                 $('.new_comment').next().css('clear', 'both');
                 $('.new_comment').prev().find('.cancel_comment').css('display', 'inline-block')
                     .find('.cancel_comment').css('display', 'inline-block');
            }
        });

    });
}

此 AJAX 调用成功追加回复，并发送到此视图以将其保存到数据库：

def comment_reply(request):
    print('reply')
    if request.is_ajax():
        comment = CommentForm(request.POST or None)
        reply_text = request.POST.get('reply_text')
        id = request.POST.get('id')
        parent_id = request.POST.get('parent_id')
        parent = Comment.objects.get(id=parent_id)
        if comment.is_valid():
            comment = Comment.objects.create(comment_text=reply_text, destination=id, user=request.user, parent_id=parent_id, parent_comment=parent)
            username = str(request.user)
            return JsonResponse({'reply_text': reply_text, 'username': username})

一切正常，除了此视图被调用两次并创建 2 个Comment对象。知道它为什么这样做吗？

Answer 1

将注释汇总为答案：

不知道为什么它被限制两次，但我相信onclick甚至可以多次触发，这会导致多重绑定onsubmit

这两件作品的区别：

$('.reply_comment_form').on('submit', function(e) {

和

$(document).on('submit', '.reply_comment_form', function(e) {

代码ondomready执行（即当 DOM 文档准备就绪时），此时.reply_comment_form还不存在，因此 submit 事件没有挂接到任何东西。

第二部分在存在的$(document)范围内执行，on()中的第二个参数表示应限制哪些元素。它的性能有点差（因为它必须观看整个文档），但它可以工作。