javascript - AJAX 函数甚至在第一行 jQuery 按钮点击之前就被调用了，为什么？

Question

我正在开发 MVC 应用程序，我必须在单击按钮时隐藏按钮并在 ajax 请求完成时显示。但是按钮在所有请求完成后隐藏。以下是我尝试过的。

<input type="button" id="btnCalculateAndSave" value="Calculate & Save" style="float: right" />

下面是 jQuery click，即使它也有调用相同按钮点击的 ajax 函数。

$("#btnCalculateAndSave").on("click", function (e) {
  $("#btnCalculateAndSave").hide();

  //Several lines for validation

  $.ajax({
    url: '@Url.Action("myControllerFunction", "myController")',
    type: "GET",
    async: false,
    cache: false,
    dataType: "JSON",
    data: { 
      "p1": v1, 
      "p2": v2
    },
    success: function(result) {
    }  
  }
}
});

因为我必须防止多次按钮单击事件。所以按钮是隐藏的，但在 ajax 的所有过程发生之后，甚至按钮隐藏代码都在 jQuery 单击事件的第一行中。

Answer 1

请在隐藏函数中编写主要代码。

$("#btnCalculateAndSave").hide(function(){ /* Main Code */ });

下面是你的主要代码。

 $("#btnCalculateAndSave").on("click", function (e) {
      $("#btnCalculateAndSave").hide(function(){

 $.ajax({
    url: '@Url.Action("myControllerFunction", "myController")',
    type: "GET",
    async: false,
    cache: false,
    dataType: "JSON",
    data: { 
      "p1": v1, 
      "p2": v2
    },
    success: function(result) {
    }  
  }
});

});

});