javascript - 为什么我的 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);
    } 
  }
})