javascript - 防止多次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 事件时，您都会再绑定(bind)一个事件处理程序。因此多次调用。使用事件委托(delegate)代替:

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