防止多个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);
        }
    });
});