Question

我有留言板。你可以评论每条消息（有点像faceboook）。如果您点击“评论”链接，textarea向下滑动，您就可以撰写评论了。但是，如果您点击“评论”，然后点击取消，以便textarea幻灯片重新启动，然后再次点击评论，以便再次向下滑动并留下评论，它会将提交发布两次。所以每次评论textarea滑入视图并返回时它会复制评论。

    $("body").on("click",".new_comment", function(e){ // new comment link
e.preventDefault();
var post = $(this).parents('.message_container').siblings('#post_comment');
clearInterval(refreshBoard); //stop autorefresh
$(post).slideDown(400, function() { //slide textarea down

    $(".cancel_comment").on("click", function(e) { //cancel comment
        e.preventDefault();
        $(post).slideUp(400, function() { //slide textarea back up
        $('#comments').load('messages.php'); //reload div
        msgRefresh(); //starts autorefresh

        });         

        });
});
//the following posts the comment along with info//
    $("body").one("click", '.post_comment_button', function(e){
        e.preventDefault();
        var anchor = $(this).parents('.update_comment')
.parents('#post_comment').siblings('.comment_list').find('ul:first');
            var comment = $(this).parents('.update_comment').children('textarea.post_comment').val();
            var user = $(this).parents('.update_comment').children('input.user').val();
            var msg_id = $(this).parents('.update_comment').children('input.message_id').val();
            if (comment == '')  $('#comments').load('messages.php');        
            else {
                $.post('messages.php', { 
                comment: comment, 
                message_id: msg_id, 
                post_comment: 'true' }, function(data) {
        //creatse new comment// 
                    $('body').append(data);
                    var newcomment = "<li><div class='comment_container'>
    <div class='date'>less than 1 minute ago</div>
    <div class='name'>" + user + " </div>
    <div class='info_bar'><div class='edit_comment'>
    <a href='#' class='comment_edit'>Edit</a>   </div>
    <span>|</span><a href='#' class='delete_comment'>Delete</a></div>
    <div class='fadeOut_comment'><div class='posted_comment'> " + 
    nl2br(htmlEntities(comment.trim())) + " </div></div></li>";
                            $(post).slideUp(400);
                            $(newcomment).fadeIn(500, function() {
                                $('#comments').load('messages.php');
                            }).appendTo(anchor);
                        });
                    }
                });

        });

所以我的问题是为什么会发生这种情况？我该如何阻止它？如果您需要更多信息，请询问。三江源

Answer 1

这种情况正在发生，因为每次有人点击.cancel_comment链接时，您都会点击.new_comment点击处理程序。

在第一个评论中，它会触发一次并再次绑定，第二个评论触发两次并再次绑定，等等。在第10个评论中，它将触发10次因为你附加了10个事件处理程序。

然后，因为你在这个回调中调用msgRefresh();，它会多次向DOM添加相同的消息。

要仅绑定一次，请执行以下外部 .new_comment点击回调。

$(".cancel_comment").on("click", function(e) { //cancel comment
    e.preventDefault();
    $(post).slideUp(400, function()
    { //slide textarea back up
        $('#comments').load('messages.php'); //reload div
        msgRefresh(); //starts autorefresh
    });         
});

然后像这样绑定它：

$("body").on("click", ".cancel_comment", function(e)
{
    //cancel comment
});

我可以看到你还在.new_comment点击回调中至少再举办一次活动。你应该避免这样做，不要在回调中绑定任何内容，除非你真的需要并且你100％确定它不会被连接多次。

编辑：完整的代码可能如下所示：

$("body").on("click", ".cancel_comment", function(e) { //cancel comment
    e.preventDefault();
    $(post).slideUp(400, function() { //slide textarea back up
    $('#comments').load('messages.php'); //reload div
        msgRefresh(); //starts autorefresh

    });         

});

    $("body").on("click",".new_comment", function(e){ // new comment link
e.preventDefault();
var post = $(this).parents('.message_container').siblings('#post_comment');
clearInterval(refreshBoard); //stop autorefresh
$(post).slideDown(400, function() { //slide textarea down

});
//the following posts the comment along with info//
    $("body").one("click", '.post_comment_button', function(e){
        e.preventDefault();
        var anchor = $(this).parents('.update_comment')
.parents('#post_comment').siblings('.comment_list').find('ul:first');
            var comment = $(this).parents('.update_comment').children('textarea.post_comment').val();
            var user = $(this).parents('.update_comment').children('input.user').val();
            var msg_id = $(this).parents('.update_comment').children('input.message_id').val();
            if (comment == '')  $('#comments').load('messages.php');        
            else {
                $.post('messages.php', { 
                comment: comment, 
                message_id: msg_id, 
                post_comment: 'true' }, function(data) {
        //creatse new comment// 
                    $('body').append(data);
                    var newcomment = "<li><div class='comment_container'>
    <div class='date'>less than 1 minute ago</div>
    <div class='name'>" + user + " </div>
    <div class='info_bar'><div class='edit_comment'>
    <a href='#' class='comment_edit'>Edit</a>   </div>
    <span>|</span><a href='#' class='delete_comment'>Delete</a></div>
    <div class='fadeOut_comment'><div class='posted_comment'> " + 
    nl2br(htmlEntities(comment.trim())) + " </div></div></li>";
                            $(post).slideUp(400);
                            $(newcomment).fadeIn(500, function() {
                                $('#comments').load('messages.php');
                            }).appendTo(anchor);
                        });
                    }
                });

        });

为什么jquery ajax多次发送？

1 个答案: