Question

我有一个逐步向导的流程，在每个步骤之后，用户为该步骤输入的信息会折叠成简短的摘要视图，旁边会出现“返回”链接，如果用户决定要改变某些内容，则允许用户跳回流程中的该步骤。

问题是，我不希望在向导动画时可以点击“返回”链接。要做到这一点，我使用的技巧是我以前多次使用过的;当我希望它被禁用时，将onclick处理程序缓存到另一个属性，然后在我希望它再次成为可单击时恢复它。这是我第一次尝试使用jQuery，并且由于某种原因它无法正常工作。我的禁用代码是：

    jQuery.each($("a.goBackLink"), function() {
        this._oldOnclick = this.onclick;
        this.onclick = function() {alert("disabled!!!");};
        $(this).css("color", "lightGray ! important");
    });

...我的启用代码是：

    jQuery.each($("a.goBackLink"), function() {
        this.onclick = this._oldOnclick;
        $(this).css("color", "#0000CC ! important");
    });

我不确定它为什么不起作用（这些是使用相应链接标记上的onclick属性定义的好的，老式的onclick处理程序）。禁用链接后，我总是得到“禁用!!!”单击它们时的消息，即使在我运行应该重新启用它们的代码之后也是如此。有什么想法吗？

此代码的另一个小问题是，更改链接颜色的css()调用似乎也不起作用。

Answer 1

我不打扰你的点击处理程序。相反，请尝试在单击处理程序内添加条件检查，以查看某个目标元素当前是否为动画。

if ($('#someElement:animated').length == 0)
{
    // nothing is animating, go ahead and do stuff
}

Answer 2

你可能会让这个更简洁，但它应该给你一个想法......没有测试它，所以看你的控制台输入： - ）

function initBack(sel){
   var s = sel||'a.goBackLink';
   jQuery(s).each(function(){
      var click = function(e){
         // implementation for click
      }
      $(this).data('handler.click', click);
   });
}

function enableBack(sel){
  var s = sel||'a.goBackLink';
  jQuery(this).each(function(){
    var $this = jQuery(this);
    if(typeof $this.data('handler.click') == 'function'){
      $this.bind('goBack.click', $this.data('handler.click'));
      $this.css("color", "lightGray ! important");
    }
  });
}

function disableBack(sel){
  var s = sel||'a.goBackLink';
  jQuery(s).each(function(){
     var $this = jQuery(this);
     $this.unbind('goBack.click');
     $this.css("color", "#0000CC ! important");
  });

}


jQuery(document).ready(function(){
   initBack();
   jQuery('#triggerElement').click(function(){
      disableBack();
      jQuery('#animatedElement').animate({/* ... */ }, function(){
         enableBack();
      }); 
   });
});

jQuery：无法缓存onclick处理程序？

2 个答案: