2010-04-27 29 views
10

我在幾個星期前問這個jQuery開發論壇沒有運氣禁止,所以我會盡量在這裏再次:)jQuery UI的按鈕,大幹快上刷新

我做了一個簡單的小部件爲一個項目我工作,但我遇到了一個奇怪的問題。

這是最容易解釋它與一個示例實現。 http://decko.dk/buttontest

在頁面上有3個按鈕。第一個是我的下拉小部件。下一個是常規禁用按鈕(A),最後一個是常規啓用按鈕(B)。 如果您然後刷新頁面(按F5或其他),現在禁用啓用的按鈕神祕。 我不知道爲什麼會發生這種情況,但如果按鈕A沒有被禁用,刷新時不會禁用按鈕B.另外,如果我在窗口小部件代碼中刪除了對insertAfter的調用,則該按鈕不會被禁用。 任何人都可以闡明爲什麼會出現這種奇怪的行爲?

順便說一句,我只能在Firefox中重現這一點。

+0

感謝問這個,哥們 - 我遇到同樣的問題 – 2010-08-27 16:56:08

+1

我發現這個問題尋找一個相關問題的解決方案,Chrome和FF將不會t將禁用的jQuery UI按鈕顯示爲禁用(它看起來就像一個啓用的按鈕,只有您不能點擊它並且工具提示不起作用),但它似乎只能在Opera上按預期工作。經過一番討論後,似乎「問題」是我正在使用「常規」jQuery的'.attr('disabled','disabled')'和'.removeAttr('disabled')'而不是jQuery UI's'。按鈕('選項','禁用',aBoolean)'。一旦我切換到後者,它跨瀏覽器工作。希望能幫助別人。 – 2012-12-03 00:12:46

回答

12

我相信這是在Firefox中如何記住表單字段/控制值中的錯誤,並指出:

  1. 第一頁面加載後,有文件在三個<button>元素,<button id="button_a">被禁用。 (當jQuery UI風格的按鈕被啓用或禁用時,它將底層元素設置爲相同的狀態。)
  2. Firefox記住第二個<button>被禁用。
  3. 頁面刷新後,在任何腳本運行之前,Firefox會恢復表單域和控件。它禁用第二個<button>,但由於沒有腳本已經運行,第二個按鈕是<button id="button_b">
  4. 當jQuery UI爲<button id="button_b">創建樣式化按鈕時,它會看到它被禁用並繼續將其設置爲禁用。

這裏有兩個問題:

  1. 火狐如何記住哪些元素被禁用。它沒有考慮到動態元素。我建議這個filing a bug with Mozilla
  2. 頁面刷新後表單元素保持禁用狀態。我不確定這是否是正確的行爲,但有兩個這樣的bugzillareports

測試用例可以向下簡化到只是動態地添加<button>元素和禁用<button id="button_a">,沒有的jQuery/jQuery UI的必要:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
    <title>disabled button test</title> 
    <script type="text/javascript"> 
    window.onload = function() { 
     var a = document.getElementById('button_a'), 
      menu = document.createElement('button'); 
     menu.appendChild(document.createTextNode('Menu')); 
     document.body.insertBefore(menu, a); 
     a.disabled = true; 
    }; 
    </script> 
</head> 
<body> 
    <button id="button_a">A</button> 
    <button id="button_b">B</button> 
</body> 
</html> 
+0

這就是我一直在想的,但希望它是一個jQuery的bug(因爲這將是一個更容易解決)。但隨着代碼的顯示,這絕對是Firefox中的「緩存」錯誤。 – Decko 2010-04-27 11:34:35

4

我一直也越來越此問題,並制定出它是到在Firefox愚蠢的行爲,我定盤像這樣:

前:

//set up the buttons 
$("button").button(); 

後:

//set up the buttons (and make sure firefox behaves) 
$("button").button().attr("autocomplete", "off"); 
+0

不知道'自動完成'應該爲按鈕做什麼 - 不適合我。我使用'$('button')。removeAttr('disabled')。button();'代替。 – asgeo1 2011-06-21 21:32:36

+0

已經有幾個版本的Firefox,因此,這種行爲可能已經改變,但自動完成關閉似乎可以防止Firefox刷新頁面時保存控件狀態的惱人習慣 – 2011-06-21 23:22:18

+0

您可以將'autocomplete =「設置爲關閉」 HTML標記中的''屬性。 – guzart 2012-06-27 01:36:25

0

Expires HTTP標頭設置爲在過去的日期,解決了這個問題,我在Firefox 6.0。

0

這裏是我發現的作品真的很好在所有瀏覽器的解決方案......

我給每個按鈕(可以被禁用)一類的js_submit「

我再重新啓用已禁用的任何按鈕在頁面卸載時觸發的頁面隱藏事件上帶有類'js_submit'。

我在try catch中封裝了事件分配,以防止不支持此事件的瀏覽器拋出錯誤(如IE)。

下面是代碼:

<input id="button" type="button" value="Submit" class="js_submit" /> 


// Fix for firefox bfcache: 
try { 
    window.addEventListener('pagehide', PageHideHandler, false); 
} catch (e) { } 

//Fires when a page is unloaded: 
function PageHideHandler() { 
    //re-enable disabled submit buttons: 
    $('.js_submit').attr('disabled', false); 
} 
-2

在我來說,這是一個引導錯誤

<input id="appointmentBtn" type="button" 
ng-click="addAppointment()" class="btn btn-primary btn-xs 
disabled" value="Add Appointment"> 

相反,它應該已經

<input id="appointmentBtn" type="button" 
ng-click="addAppointment()" class="btn-primary btn-xs 
disabled" value="Add Appointment"> 
+0

請添加此評論。 – Abhi 2015-06-01 17:25:49