Question

我有一个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个对象。知道为什么会这样做吗？

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()中的第二个参数说明应该限制哪些元素。它的性能有点差（因为它必须观看整个文档），但它有效。

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

1 个答案: