php - jquery ajaxが複数回送信するのはなぜですか?

Question

メッセージボードがあります。また、各メッセージにコメントすることもできます (フェイスブックに少し似ています)。「コメント」リンクをクリックすると、下にtextareaスライドしてコメントを書くことができます。ただし、「コメント」をクリックしてからキャンセルをクリックすると、textareaスライドが元に戻り、もう一度コメントをクリックしてスライドが再び下に戻り、コメントを残すと、コメントが2回投稿されます。そのため、コメントのテキストエリアがスライドして表示されたり戻ったりするたびに、コメントが複製されます。

    $("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);
                        });
                    }
                });

        });

私の質問は、なぜこれが起こっているのですか？どうすればそれを止めることができますか？さらに情報が必要な場合は、お問い合わせください。ありがとうございました