jquery-ui - 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();

如果您愿意，我还设置了一个 fiddle ，以便您可以看到它的实际效果: 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> ，而默认浏览器行为实际上是点击 <input>从那。