jQueryUI，單選按鈕狀態，並單擊事件

我有一個頁面有幾組單選按鈕，用於設置選項。當點擊特定的人時，默認情況下使用點擊事件處理程序來選擇其他人。該功能完美運行，但按鈕的視覺狀態存在問題。jQueryUI，單選按鈕狀態，並單擊事件

我正在使用jQueryUI的.buttonset（）方法來改善審美性，當我以編程方式觸發.click（）事件時，按鈕不會以可視方式更改狀態。這可能導致當前選項與屏幕上顯示的選項大不相同。

示例代碼來說明這個問題：

<fieldset> 
    <label for="button1">Button 1</label> 
    <input type="radio" id="button1" name="test" /> 

    <label for="button2">Button 2</label> 
    <input type="radio" id="button2" name="test" /> 
</fieldset> 

$('fieldset').buttonset(); 

$('#button2').click(function() { 
    alert('button 2 clicked'); 
}); 

$('#button2').click();

我還設置了小提琴，所以你可以看到它在行動，如果你願意的話：http://jsfiddle.net/T5MGh/

正如你所期望的，警報盒會彈出頁面加載，但該按鈕不會像用戶單擊一樣在視覺上進行更改。

有什麼想法？

來源

2010-06-19 Rookwood

您可以點擊該按鈕設置使用實際的標籤，就像這樣：

$('[for=button2]').click();

這工作，因爲你的結構看起來像這樣.buttonset()後：

<fieldset class="ui-buttonset"> 
    <label for="button1" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false"><span class="ui-button-text">Button 1</span></label> 
    <input type="radio" id="button1" name="test" class="ui-helper-hidden-accessible"> 

    <label for="button2" aria-pressed="true" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right ui-state-active ui-state-hover" role="button" aria-disabled="false"><span class="ui-button-text">Button 2</span></label> 
    <input type="radio" id="button2" name="test" class="ui-helper-hidden-accessible"> 
</fieldset>

它最初不工作由於jQuery UI的功能如何，依賴的click來自<label>，而實際點擊<input>的defult瀏覽器行爲來自這一點。

來源

2010-06-19 20:24:36

工程就像一個魅力。謝謝！如果沒有幫助，我不會很快想到這一點。 – Rookwood 2010-06-19 20:33:30

@Rookwood - Welcome :) – 2010-06-19 20:35:46

作爲未來讀者的一個提示，看起來它仍然有必要在單選按鈕上單擊.click（）。 $（'[for = button_id]，#button_id'）。click（）; 否則，它在視覺上發生變化，但不會影響實際的按鈕狀態，與原始問題相反。 – Rookwood 2010-06-19 22:20:24

可能會出現在更新版本的jQuery/jQuery UI中，行爲已發生變化，將原始代碼的行爲作爲此問題發佈到此問題的作者想要的內容（單擊代碼中的按鈕時需要注意既調用事件又可視覺地改變按鈕）。

你也可以在引用的jsfiddle中看到。所以看起來這個答案只適用於老版本的jQuery/jQuery UI。

來源

2012-09-08 13:52:59 matanster

jQueryUI，單選按鈕狀態，並單擊事件

回答

相關問題