Jquery ui jQueryUI,单选按钮状态,然后单击事件
我有一个页面,其中有几组单选按钮用于设置选项。当一个用户单击特定的用户时,默认情况下会使用单击事件处理程序选择其他用户。该功能工作正常,但按钮的视觉状态存在问题 我正在使用jQueryUI的.buttonset()方法来改进美观性,当我以编程方式触发.click()事件时,按钮不会在视觉上改变状态。这可能导致当前选项与屏幕上显示的选项大不相同 用于说明问题的示例代码:Jquery ui jQueryUI,单选按钮状态,然后单击事件,jquery-ui,radio-button,Jquery Ui,Radio Button,我有一个页面,其中有几组单选按钮用于设置选项。当一个用户单击特定的用户时,默认情况下会使用单击事件处理程序选择其他用户。该功能工作正常,但按钮的视觉状态存在问题 我正在使用jQueryUI的.buttonset()方法来改进美观性,当我以编程方式触发.click()事件时,按钮不会在视觉上改变状态。这可能导致当前选项与屏幕上显示的选项大不相同 用于说明问题的示例代码: <fieldset> <label for="button1">Button 1</lab
<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();
按钮1
按钮2
$('fieldset').buttonset();
$('#按钮2')。单击(函数(){
警报(“点击按钮2”);
});
$(“#按钮2”)。单击();
如果您愿意,我还设置了一把小提琴,以便您可以看到它的实际操作:
正如您所期望的,页面加载时会弹出警报框,但按钮不会像用户单击时那样在视觉上发生变化
有什么想法吗?您可以单击按钮集使用的实际标签,如下所示:
$('[for=button2]').click();
这是因为您的结构在.buttonset()之后看起来像这样:
按钮1
按钮2
它最初不起作用,因为jQuery UI是如何工作的,它依赖于通过
的点击,而最终的浏览器行为实际上是从中点击
。在jQuery/jQuery UI的较新版本中,行为可能发生了变化,将作为此问题发布的原始代码的行为呈现给此问题的作者想要的内容(从代码中单击按钮将同时负责调用事件和直观地更改按钮)
您也可以在引用的JSFIDLE中看到这一点。因此,这个答案似乎只适用于jQuery/jQuery UI的旧版本。非常有效。谢谢如果没有帮助,我不可能很快就明白这一点。作为今后阅读此文章的任何人的注意事项,似乎仍有必要。单击单选按钮本身也是如此$(“[for=button_id],#button_id”)。单击();否则,它会在视觉上改变,但不会影响实际的按钮状态,与原始问题相反。
<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>