Почему мой запрос ajax выполняется несколько раз?

Question

Я делаю запрос ajax, чтобы изменить data-status в одном из моих div. Я не знаю почему, он выполняет несколько раз, когда я нажимаю одну из своих кнопок.

Вот мой код:

$(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

Возьмите нажмите связывания для #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); 
    }); 
});