Proper jQuery technique to disable button with ajax post then re-enble button onComplete -

I have a button that posts an AJAX - I want to disable the button, I want to accomplish my work. I'm done, then when I'm done - I want to re-enable the button. In my conversation swaping the image button (on the blurred image button) and rendering a spinner is included, upon completion, I hide the spinner and restore the original button image.

My view is included in unbundling, then click reboots the event.

This is my code - it works great - but, I want to know that this is a fair / efficient / acceptable strategy?

  // Update Club name $ j ('# btnUpdateClubName'). Bind ('click', updateClubName); Function updateClubName () {var $ this = $ j (this); Var $ spinner = $ this.next ('spinner'); Var renderURL = RES.BuildClubUpdateURL ("UpdateClubName"); $ This.ajaxStart (function () {$ this.attr ("src", imgPathSaveAndUpdateBtnDisabled), unbound ('click'). AddClass ('wait-cursor'); $ spinner.show ();}); $ J.ajax ({type: "POST", data: $ j ('# hidStandingOrderId, #txtClubName, #clubOrderIdEditClubName'). Serialize (), url: renderURL, Data type: 'html', contentType: 'application / x - www-form-urlencoded ', success: function (data) {// some stuff}}}); $ This.ajaxCpleplete (function () {$ spinner.hide ()} $ this.attr ("src", imgPathSaveAndUpdateBtn) .bund ('click', update clanname) .removeClass ('wait-cursor'); $ j ( "#cbEditClubName"). Colorbox.close ();}); }  

What you have done but it is a little useless, because it is a

 . Unbund ('click')  

To do this:

 . Unbind (click on 'click', updateClubName)  

You can have other click events without interrupting it, only Will open a handler.

---

A better option ( for me , you can argue whether it is "better") without having to ring a variable to store a variable, To know that you are currently using and, for example:

  $ j ('# btnUpdateClubName'). Tie ('Click', UpdateClubName); Function updateClubName () {if ($. Data (this, "posting")) returned incorrectly; // are we posting? Abortion! $ .data (this is "posting", true); // set variable var $ the = $ j (this); Var $ spinner = $ this.next ('spinner'); Var renderURL = RES.BuildClubUpdateURL ("UpdateClubName"); $ This.attr ("src", imgPathSaveAndUpdateBtnDisabled) .addClass ('wait-cursor'); $ Spinner.show (); $ J.ajax ({type: "POST", data: $ j ('# hidStandingOrderId, #txtClubName, #clubOrderIdEditClubName'). Serialize (), url: renderURL, Data type: 'html', contentType: 'application / x --Www-form-urlencoded ', success: function (data) {// some stuff $ spinner.hide (); $ this.attr ("src", imgPathSaveAndUpdateBtn) .removeClass (' wait-cursor '). Data (" Posting ", false); // clean it, ready to post again $ j (" # cbEditClubName "). Colorbox.close ();}}); }  

If you are posting this with this approach, then the data for "posting" is true , and skip future clicks only. No. Notwithstanding the feedback comes back and your success goes on the code button is enabled again. This is the same effect , but there is no duplicate handler and no re / composite Not binding.