为什么 jquery ajax 发送多次？

Question

我有一个留言板。你可以评论每条消息（有点像facebook）。 如果您单击“评论”链接，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

发生这种情况是因为每次有人点击.new_comment 链接时，您都在为.cancel_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);
                        });
                    }
                });

        });