jQueryUI、单选按钮状态和点击事件 [英] jQueryUI, radio button state, and click events

问题描述

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

I have a page with several sets of radio buttons that are used to set options. When one clicks on specific ones, others are selected by default using click event handlers. The functionality works perfectly, but there is an issue with the button's visual state.

我正在使用 jQueryUI 的 .buttonset() 方法来提高美感，当我以编程方式触发 .click() 事件时，按钮不会在视觉上改变状态.这可能会导致当前选项与屏幕上显示的完全不同.

I'm using jQueryUI's .buttonset() method to improve the aesthetics, and when I trigger a .click() event programatically, the button does not change state visually. This can result in the current options being quite different from what appears on screen.

说明问题的示例代码:

<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/

​I also set up a fiddle so you can see it in action, if you so desire: http://jsfiddle.net/T5MGh/

正如您所期望的那样，在页面加载时会弹出警告框，但按钮不会像用户单击那样在视觉上发生变化.

As you would expect, the alert box pops up on page load as it should, but the button does not change visually as it does from a user-click.

有什么想法吗?

推荐答案

你可以点击按钮集使用的实际标签，像这样:

You can click the actual label that the button set uses, like this:

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

这是因为你的结构在 .buttonset() 之后看起来像这样:

This works because your structure looks like this after .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 是如何做到的，它依赖通过 <label> 来的 click, 以及实际点击 <input> 的默认浏览器行为.

It doesn't work initially because of how jQuery UI does it, it relies on the click coming through the <label>, and the defult browser behavior actually clicking the <input> from that.

这篇关于jQueryUI、单选按钮状态和点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！