為什么我的Ajax請求執行多次？

Question

我正在執行ajax請求以更改我的一個div中的data-status 。 我不知道為什么，當我點擊其中一個按鈕時，它會執行多次。

這是我的代碼：

$(document).on("click", ".check", function(){
    var status = $(this).closest("td").data("status");
    var avatarID = $(this).closest("td").data("id");

    if (status === 1) {
        $("#alert-unpublish-status").addClass('is-visible');
        $("#alert-unpublish-status").on("click", function(e){
            e.preventDefault();
            $.ajax({
                url: 'https://www.legiaodossuperpoderes.com.br/chronus/api/adm/avatar/'+avatarID+'/unpublish',
                type: 'POST',
                contentType: "application/json; charset=UTF-8",
                xhrFields: {
                    withCredentials: true
                },
                success: function() {
                    Materialize.toast("Avatar unpublished", 2000, "green darken-1");
                    $("#alert-unpublish-status").removeClass('is-visible');
                    setTimeout(loadPage, 500)
                }
            });
        });
    }
})

怎么了 ？ 我該如何改善呢？

謝謝！

Answer 1

您已在另一個單擊處理程序中添加了單擊處理程序，因此，每次單擊.check元素時，都會添加更多處理程序。 嘗試創建變量以跟蹤是否已添加處理程序。 像這樣：

 //variable to track handler status initially false $("#alert-unpublish-status").data("handler-added", false); $(document).on("click", ".check", function() { var status = $(this).closest("td").data("status"); var avatarID = $(this).closest("td").data("id"); if (status === 1) { $("#alert-unpublish-status").addClass('is-visible'); //check if handler is already added before adding again if (!$("#alert-unpublish-status").data("handler-added")) { $("#alert-unpublish-status").on("click", function(e) { e.preventDefault(); $.ajax({ url: 'https://www.legiaodossuperpoderes.com.br/chronus/api/adm/avatar/' + avatarID + '/unpublish', type: 'POST', contentType: "application/json; charset=UTF-8", xhrFields: { withCredentials: true }, success: function() { Materialize.toast("Avatar unpublished", 2000, "green darken-1"); $("#alert-unpublish-status").removeClass('is-visible'); setTimeout(loadPage, 500) } }); }); //sets variable so handler will not be added next time $("#alert-unpublish-status").data("handler-added", true); } } }) 

Answer 2

從.check的點擊處理程序中取出#alert-unpublish-status的點擊.check 。 您可以在通用范圍內使用變量來傳達最后單擊哪個.check 。

$(document).ready(function() {
    var status, avatarID;

    $("#alert-unpublish-status").on("click", function(e){
        e.preventDefault();
        if (status == 1) {
            $.ajax({
                url: 'https://www.legiaodossuperpoderes.com.br/chronus/api/adm/avatar/'+avatarID+'/unpublish',
                type: 'POST',
                contentType: "application/json; charset=UTF-8",
                xhrFields: {
                    withCredentials: true
                },
                success: function() {
                    Materialize.toast("Avatar unpublished", 2000, "green darken-1");
                    $("#alert-unpublish-status").removeClass('is-visible');
                    setTimeout(loadPage, 500)
                }
            });
        }
    });

    $(document).on("click", ".check", function(){
        status = $(this).closest("td").data("status");
        avatarID = $(this).closest("td").data("id");
        $("#alert-unpublish-status").toggleClass('is-visible', status == 1);
    });
});