Почему jquery ajax отправляет несколько раз?

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); 
         }); 
        } 
       }); 

     }); 

поэтому мой вопрос, почему это происходит? и как я могу остановить его? если вам нужна дополнительная информация, пожалуйста, спросите. thankyou

Answer 1

Это происходит потому, что вы ждете обработчик кликов .cancel_comment каждый раз, когда кто-то нажимает ссылку .new_comment.

На первом комментарии он срабатывает один раз и снова связывается, второй комментарий срабатывает два раза и снова связывается и т. Д. К 10-му комментарию он срабатывает 10 раз, потому что вы подключили 10 обработчиков событий.

Затем, поскольку вы вызываете msgRefresh(); внутри этого обратного вызова, он будет добавлять те же сообщения несколько раз в DOM.

Чтобы связать его только один раз, введите наружу.new_comment click callback.

$(".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% уверены, что он не будет подключен более одного раза.

EDIT: Полный код может выглядеть примерно так:

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

     });