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

【问题标题】：View being called twice/object created twice视图被调用两次/对象被创建两次
【发布时间】：2017-06-19 10:08:01
【问题描述】：

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

$('.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 对象。知道为什么会这样吗？

【问题讨论】：

代码看起来过于复杂。我认为您根本不需要将onsubmit 包装到reply_comment() 函数中。我认为你那里的onclick可以执行多次，然后onsubmit的东西也被绑定两次。
我自己尝试了$('.reply_comment_form').on('submit', function {，但没有被调用。进行 onsubmit 思考是我唯一的选择。
当然可以，因为在创建文档时该元素并不存在。尝试这样的事情：$(document).on('submit', '.reply_comment_form', function(e) { ...
这工作非常感谢你。你的代码与$('.reply_comment_form').on('submit', function { 有什么不同？

标签： jquery ajax django django-views

【解决方案1】：

将 cmets 相加得到答案：

不知道为什么它被绑定了两次，但我相信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()中的第二个参数表示应该限制哪些元素。它的性能有点差（因为它必须观看整个文档），但它可以工作。

【讨论】：