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 的工作方式，它最初不起作用，它依赖通过进行点击，默认浏览器行为实际上点击< /code> 从此。

Answer 2

在 jQuery / jQuery UI 的最新版本中，行为可能会发生变化，将作为此问题发布的原始代码的行为呈现为此问题的作者想要的内容（单击代码中的按钮可以同时调用事件并在视觉上改变按钮）。

您也可以在引用的 jsfiddle 中看到这一点。所以看来这个答案只与旧版本的 jQuery / jQuery UI 相关。