jQuery 在点击事件完成后执行操作

Question

页面内有两个按钮，一个用于从服务器检索文档(pdf)，另一个是用于提交当前表单的“下一步”按钮。

我想解除“下一步”按钮的绑定(bind)，直到用户完成下载文档。

我有以下功能:

$.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');
   });
};

然后，当文档准备好时:

$(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(); });
});

显然，我并没有同时测试所有案例，而是逐一测试。

每个测试的结果是:

• 测试 1:nextButton 再次绑定(bind)自身，但文档管理器窗口之后可能会提示
• 测试2:docButton单击功能尽快启动，然后文档重新绑定(bind)nextButton后管理器窗口可能会提示
• 测试 3:不起作用
• 测试 4:有效，但文档管理器在重新绑定(bind) nextButton 后出现提示

Answer 1

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

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