jQuery：onclickハンドラをキャッシュできませんか？

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属性）。リンクを無効にした後、私はいつも "無効になっている!!!"メッセージをクリックすると、コードを実行した後でも、それらを再度有効にする必要があります。何か案は？

このコードのその他の小さな問題の1つは、css()のリンクカラーを変更する呼び出しも機能していないように見えることです。

Answer 1

クリックハンドラーの交換は気にしません。代わりに、クリックハンドラの内部で条件付きチェックを追加して、ターゲット要素の一部が現在アニメーション化されているかどうかを確認してください。

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

Answer 2

あなたは、おそらくこのもう少し簡潔に作ることができますが、それはあなたのアイデアを与える必要があります... haventはそれはそうあなたのイネーブル/ディセーブル機能が働いていた

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