在AJAX请求时禁用按钮

我试图在点击后禁用按钮。 我试过了：

$("#ajaxStart").click(function() { $("#ajaxStart").attr("disabled", true); $.ajax({ url: 'http://localhost:8080/jQueryTest/test.json', data: { action: 'viewRekonInfo' }, type: 'post', success: function(response){ //success process here $("#alertContainer").delay(1000).fadeOut(800); }, error: errorhandler, dataType: 'json' }); $("#ajaxStart").attr("disabled", false); }); 

但按钮没有被禁用。 当我删除$("#ajaxStart").attr("disabled", false); 该按钮被禁用。

虽然这没有按预期工作，但我认为代码序列是正确的。 任何帮助将不胜感激。

Answer 1

把$("#ajaxStart").attr("disabled", false); 里面的成功function：

 $("#ajaxStart").click(function() { $("#ajaxStart").attr("disabled", true); $.ajax({ url: 'http://localhost:8080/jQueryTest/test.json', data: { action: 'viewRekonInfo' }, type: 'post', success: function(response){ //success process here $("#alertContainer").delay(1000).fadeOut(800); $("#ajaxStart").attr("disabled", false); }, error: errorhandler, dataType: 'json' }); }); 

这将确保在加载数据后将 disable设置为false …当前，您在同一个单击function中禁用并启用该按钮，即同时。

Answer 2

在您的代码中，您只需在相同的按钮单击上禁用并启用该按钮。

您必须在完成AJAX调用时启用它

这样的事情

  success: function(response){ $("#ajaxStart").attr("disabled", false); //success process here $("#alertContainer").delay(1000).fadeOut(800); }, 

Answer 3

我通过定义两个jquery函数解决了这个问题：

 var showDisableLayer = function() { $('
').appendTo(document.body); $("#loading").height($(document).height()); $("#loading").width($(document).width()); }; var hideDisableLayer = function() { $("#loading").remove(); }; 

第一个函数在所有内容之上创建一个图层。 该图层为白色且完全不透明的原因是，IE允许您单击它。

在做我的ajax时，我喜欢这样：

 $("#ajaxStart").click(function() { showDisableLayer(); // Show the layer of glass. $.ajax({ url: 'http://localhost:8080/jQueryTest/test.json', data: { action: 'viewRekonInfo' }, type: 'post', success: function(response){ //success process here $("#alertContainer").delay(1000).fadeOut(800); hideDisableLayer(); // Hides the layer of glass. }, error: errorhandler, dataType: 'json' }); }); 

Answer 4

我通过使用ajax的全局函数解决了这个问题

  $(document).ajaxStart(function () { $("#btnSubmit").attr("disabled", true); }); $(document).ajaxComplete(function () { $("#btnSubmit").attr("disabled", false); }); 

这是文档链接 。

Answer 5

$.ajax()调用“将不会阻止” – 这意味着它将立即返回，然后立即启用该按钮，因此该按钮不会被禁用。

您可以使用complete在AJAX成功，出错或完成后启用该按钮： http ： //api.jquery.com/jQuery.ajax/

完成（XMLHttpRequest，textStatus）

请求完成时要调用的函数（执行成功和错误回调之后）。 该函数传递两个参数：XMLHttpRequest对象和分类请求状态的字符串（“success”，“notmodified”，“error”，“timeout”或“parsererror”）。 这是一个Ajax事件。