jQuery：無法緩存onclick處理程序？

我有一個逐步向導類型的流程，在每一步之後，用戶爲該步驟輸入的信息摺疊成簡要的摘要視圖，並在其旁邊出現「返回」鏈接，允許用戶如果決定要改變某些內容，就跳回到流程中的那一步。jQuery：無法緩存onclick處理程序？

問題是，我不希望「向後」鏈接在嚮導製作動畫時可點擊。爲了實現這一點，我使用了一個我以前曾經使用過的技巧;當我希望將其禁用時，將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()調用來更改鏈接顏色也似乎不起作用。

來源

2011-07-08 aroth

你的啓用/禁用功能工作爲了我。看起來你在調用啓用代碼時做錯了，這就是爲什麼你也不知道顏色的原因。 –

你使用JSF嗎？如果是這樣，嘗試用jQuery替換$，除此之外，我在控制檯上嘗試了你的代碼，它確實工作。也許還有一些其他部分存在干擾？ – SelimOber

@Yiğ[email protected] - 你是對的，代碼做的是正確的，但它被錯誤的使用了。基本上有一些情況會導致'disable'代碼在一行中被調用兩次，從而使佔位符處理器緩存onclick處理程序。補丁，一切正常（除了CSS顏色，它仍然被忽略）。 – aroth

我不打擾交換你的點擊處理程序。相反，嘗試在點擊處理程序內添加條件檢查以查看某個目標元素當前是否具有動畫效果。

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

來源

2011-07-08 06:49:20

我還沒有嘗試過，但只需$（'：animated'）。如果你有很多不同的元素動畫，length可能對你頁面上的所有元素都適用。 –

這不是一個糟糕的解決方案，儘管我有一些連續運行的動畫。你知道這是否會起作用，如果用戶在一個結束和下一個即將開始的時刻碰巧點擊右鍵， – aroth

我不知道這種情況，但我知道這很快就能防止非常快速的雙擊 - 即使我的動畫從靜止開始，第二次單擊也不會滑過。 –

你很可能使這一點更簡潔，但它應該給你一個想法......還沒有測試它，看你的了typeos控制檯:-)

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

來源

2011-07-08 07:01:51 prodigitalson

jQuery：無法緩存onclick處理程序？

回答

相關問題