文章/答案/技术大牛

发布

社区首页 >问答首页 >jQueryUI、单选按钮状态和单击事件

问jQueryUI、单选按钮状态和单击事件
EN

Stack Overflow用户

提问于 2010-06-20 04:17:45

回答 2查看 11K关注 0票数 7

我有一个带有几组单选按钮的页面，这些单选按钮用于设置选项。当一个人单击特定的对象时，默认情况下会使用单击事件处理程序选择其他对象。该功能运行良好，但按钮的视觉状态存在问题。

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

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

有什么想法吗？

jquery-ui

radio-button

回答 2

Stack Overflow用户

回答已采纳

发布于 2010-06-20 04:24:36

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

$('[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的工作方式，它最初无法工作，它依赖于通过<label>传入的click，以及实际单击其中的<input>的默认浏览器行为。

票数 7

Stack Overflow用户

发布于 2012-09-08 21:53:00

在较新版本的jQuery / jQuery UI中，行为可能发生了更改，将作为此问题发布的原始代码的行为呈现为此问题的作者所需的行为(单击代码中的按钮既负责调用事件，又负责直观地更改按钮)。

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

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/3077080

复制

相似问题

问jQueryUI、单选按钮状态和单击事件
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQueryUI、单选按钮状态和单击事件EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQueryUI、单选按钮状态和单击事件
EN