防止多个ajax查询

Question

在ajax的帮助下，我获得了一些内容。在这个内容中，我也需要做一些ajax，所以我使用.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时，它会调用两个ajax查询，当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);
        }
    });
});