여러 아약스 쿼리 방지

Question

아약스의 도움을 받아 일부 콘텐츠를 얻었습니다. 또한이 내용에서 일부 아약스도해야하므로 .ajaxComplete()를 사용합니다. 다음은이 작업을 수행하는 방법입니다.

$(document).ajaxComplete(function() { 
$(".deleteParticipant").click(function(){ 
    var id={id:$(this).parent().parent().find('td#idOfParticipant').html()}; 
    $.ajax({ 
     url:"delete.php", 
     type: "POST", 
     data: id, 
     async: false, 
     success: function(data, textStatus, jqXHR) 
     { 
      alert(data); 
     } 
    }); 
}); 
$(".editParticipant").click(function(){ 
    var id={id:$(this).parent().parent().find('td#idOfParticipant').html()}; 
    $.ajax({ 
     url:"update.php", 
     type: "POST", 
     data: id, 
     async: false, 
     success: function(data, textStatus, jqXHR) 
     { 
      alert(data); 
     } 
    }); 
}); 
}); 

모든 것이 잘 작동하지만 내가 .deleteParticipant 또는 두 개의 아약스 쿼리를 호출 .editParticipant 두 번째로, 클릭하면 3시 - 4는이 상황을 방지하는 가장 좋은 방법은 무엇입니까 등?

Answer 1

ajaxComplete 이벤트가 발생할 때마다 하나 이상의 이벤트 처리기를 바인딩합니다. 따라서 다중 호출. 대신 이벤트 위임을 사용하십시오.

$(document).on("click", ".deleteParticipant", function() { 
    var id={id:$(this).parent().parent().find('td#idOfParticipant').html()}; 
    $.ajax({ 
     url:"delete.php", 
     type: "POST", 
     data: id, 
     async: false, 
     success: function(data, textStatus, jqXHR) 
     { 
      alert(data); 
     } 
    }); 
}).on("click", ".editParticipant", function() { 
    var id={id:$(this).parent().parent().find('td#idOfParticipant').html()}; 
    $.ajax({ 
     url:"update.php", 
     type: "POST", 
     data: id, 
     async: false, 
     success: function(data, textStatus, jqXHR) 
     { 
      alert(data); 
     } 
    }); 
});