jQuery Perform action after click event finishes

Question

Inside a page got two buttons, one works retrieving a document from server (pdf) and the other is a "next" button to submit the current form.

I want to unbind "next" button 'till user completes downloading document.

I have the following functions:

$.fn.unbindItem = function(){
   return this.each(function(){
      $(this).css('opacity', 0.5).css('cursor', 'not-allowed').unbind('click');
   });
};

$.fn.reBindItem = function(){
   return this.each(function(){
      $(this).css('opacity', 1).css('cursor', 'pointer').bind('click');
   });
};

And then, when document is ready:

$(document).ready(function(){
  ...
  nextButton.unbindItem();

  //TEST 1
  docButton.click(function(e){
    $.when(e).done(function(){ nextButton.reBindItem(); });
  });

  //TEST 2
  $.when(docButton.click()).done(function(){ nextButton.reBindItem(); });

  //TEST 3
  docButton.click().queue(function(){
     nextButton.reBindItem();
     $(this).dequeue();
  });

  //TEST 4
  docButton.click().done(function(){ nextButton.reBindItem(); });
});

Obviously, I hadn't test all cases at the same time, but one by one.

The results of each TEST are:

• TEST 1: nextButton binds itself again, but document manager window may prompt after
• TEST 2: docButton click function is launch ASAP, then document manager window may prompt after nextButton is re binded
• TEST 3: doesn't works
• TEST 4: works, but document manager prompts after nextButton is rebinded

Answer 1

$.fn.unbindItem = function(){
   return this.each(function(){
      $(this).attr("disabled","disabled");
   });
};

$.fn.reBindItem = function(){
   return this.each(function(){
      $(this).removeAttr("disabled");
   });
};