jQueryUI,单选按钮状态和单击事件

Question

我有一个页面,其中包含几组用于设置选项的单选按钮.当单击特定的一个时,默认情况下使用单击事件处理程序选择其他人.功能完美,但按钮的视觉状态存在问题.

我正在使用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/

正如您所料,警报框会在页面加载时弹出,但按钮不会像用户点击那样直观地更改.

有什么想法吗？

Answer 1

您可以单击按钮集使用的实际标签,如下所示:

$('[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>,而defult浏览器行为实际上点击了<input>那个.