提交点击时，Jquery自动加载gif和按钮禁用

是否可以自动显示/隐藏ajax加载gif，同时禁用/启用提交按钮？ （当提交按钮是样式而不是输入类型=提交时）

目前提交时我这样做：

$("#save_button_id").click(function () { if ($('#save_button_id').hasClass('ui-state-disabled')) return false; Save(); }); function Save() { StartAjax($("#save_button_id")); $.ajax({ success: function (data) { EndAjax($("#save_button_id")); // etc... }, error: function (xhr, status, error) { EndAjax($("#save_button_id")); // etc ... } }); } function StartAjax(button) { DisableButtonClick(button); $("#ajaxLoad").show(); } function EndAjax(button) { EnableButtonClick(button); $("#ajaxLoad").hide(); } 

我已经看过一些地方谈论如何使用.ajaxStart（）自动显示加载gif，但是是否也可以找到对点击的按钮（样式标签）的引用，并自动禁用/启用它？

这一点是不必每次都手动输入Start / EndAjax，并确保应用程序在任何地方都是一致的。

编辑

到目前为止，没有一个答案提供自动化 – 任何解决方案（如我上面的当前一个）你必须在每个$ .ajax（）之前和之后手动键入开始/结束导致维护问题：很容易忘记放置开始/结束一些$ .ajax（）调用旁边，如果你想稍后改变它的工作方式，你需要通过每一个来进行更改。

编辑2 – 澄清点.delegate（）建议

你说“你可以将你的事件处理程序附加到任何元素” – 但我想将它附加到每个按钮元素（DRY！）：所以我已经修改了你的建议的第一部分：

 $('div#buttons a.ui-icon').each(function(index) { $(this).ajaxStart(function() { $("#ajaxLoad").show(); }); }); 

这解决了第一个问题，即如何显示任何按钮的加载.gif，而不必重复键入“$（”＃ajaxLoad“）。show（）”到处都有$ .ajax（）调用。

下一部分是如何在单击时禁用任何按钮（同样没有重复代码） – 你建议使用.delegate（）。 但在您的示例中，每次单击按钮都会调用Save（）方法。 （我更改了选择器以匹配我的html）

 $('div#buttons a.ui-icon').delegate('button:not(.ui-state-disabled)', 'click', function() { $(this).toggleClass('ui-state-disabled'); Save(); // this line needs replacing with a call to $(this).something }); 

这个问题是$（this）并不总是保存按钮（选择器返回所有按钮），它可能是删除按钮或取消按钮等。所以调用$（this）.toggleClass很好，但是调用Save（）意味着你正在调用错误的函数。 所有这些按钮都有一个.click方法：

 $("#SaveButton").click(function () { Save(); }); $("#DeleteButton").click(function () { Delete(); }); 

所以这是原始的点击function，需要调用它所说的$（this）。上面的东西。 此时它应该调用原始点击 – 或者说它应该冒泡到最初的.click更正确。 .delegate必须更通用，原始.click将提供特定的实现。

Answer 1

事实certificate它非常简单：我已将其包含在我的每个页面运行的helper.js文件中：

 $(document).ready(function () { $('div#buttons a.fm-button').each(function (index) { $(this).ajaxStart(function () { $("#ajaxLoad").show(); DisableButtonClick($(this)); }); $(this).ajaxStop(function () { $("#ajaxLoad").hide(); EnableButtonClick($(this)); }); }); }); 

现在，无论何时在任何页面上单击任何ajax-y按钮，都会禁用按钮并显示ajax加载gif。 当ajax呼叫结束时，它们将返回正常状态。 所有这些都是在每次调用.ajax（）时重复输入代码完成的。

Answer 2

您可以将事件处理程序附加到任何元素; 所以对于你的保存按钮：

 $(this).ajaxStart(function() { $("#ajaxLoad").show(); }); 

现在，您可以监听页面上每个按钮的click事件，并从该元素调用ajax函数：

 $('div').delegate('button:not(.ui-state-disabled)', 'click', function() { $(this).toggleClass('ui-state-disabled'); Save(); }); 

$.delegate()函数侦听没有.ui-state-disabled类的每个元素的click事件。 触发事件时，它会将该按钮的类切换为禁用，调用Save函数并触发$ .ajaxStart（）事件。 该事件将显示您的动画ajax gif。

我假设你的按钮都包含在这个例子的div中。 你们许多人想要修改代码，以便$('div').delegate...实际指定按钮的包含元素。 我也假设你正在使用jQuery 1.4.2。

您应该能够使用$.ajaxStop()函数再次还原所有内容。

Answer 3

 $("#save_button_id").click(function () { if ($('#save_button_id').hasClass('ui-state-disabled')) { return false; } else { // add disabled class $('#save_button_id').addClass('ui-state-disabled'); // optionally disable the button if it's an input button $('#save_button_id').attr('disabled','disabled'); // show ajax loader $("#ajaxLoad").show(); $.ajax({ url: 'ajax/stuff.html', success: function(data) { // do stuff // re-enable button $('#save_button_id').removeClass('ui-state-disabled'); // optionally re-enable the button if it's an input button $('#save_button_id').attr('disabled',''); // hide ajax loader $("#ajaxLoad").hide(); }, error: function (xhr, status, error) { // do stuff // re-enable button $('#save_button_id').removeClass('ui-state-disabled'); // optionally re-enable the button if it's an input button $('#save_button_id').attr('disabled',''); // hide ajax loader $("#ajaxLoad").hide(); }); } // prevent default action, if any return false; }); 

编辑：并将它们放在一个函数中：

 function processing(status) { if (status == 1) { // add disabled class $('#save_button_id').addClass('ui-state-disabled'); // optionally disable the button if it's an input button $('#save_button_id').attr('disabled','disabled'); // show ajax loader $("#ajaxLoad").show(); } else { // re-enable button $('#save_button_id').removeClass('ui-state-disabled'); // optionally re-enable the button if it's an input button $('#save_button_id').attr('disabled',''); // hide ajax loader $("#ajaxLoad").hide(); } } 

然后调用该函数：

 $("#save_button_id").click(function () { if ($('#save_button_id').hasClass('ui-state-disabled')) { return false; } else { processing(1); $.ajax({ url: 'ajax/stuff.html', success: function(data) { // do stuff processing(0); }, error: function (xhr, status, error) { // do stuff processing(0); }); } // prevent default action, if any return false; });