jQuery 按钮集更改答案

【问题标题】：jQuery buttonset changejQuery 按钮集更改
【发布时间】：2011-03-21 03:21:22
【问题描述】：

我是 jQuery 新手，我想我会在我的应用程序上使用它的按钮集而不是一些单选按钮。此处的文档：http://jqueryui.com/demos/button/#radio

当按钮集更改值时，如何向事件添加处理程序？

这是我尝试过的代码的 sn-p：

$('input.tod_quant').change(function() {
    alert('TEST');
});

然后在 HTML 中：

<span id="tod_quant" class="buttonset">
        <input type="radio" id="tod_quant5" name="tod_quant" value="5" /><label for="tod_quant5">5-Minute</label>
        <input type="radio" id="tod_quant60" name="tod_quant" checked="checked" value="60" /><label for="tod_quant60">60-Minute</label>
        </span>

“更改”事件永远不会触发。甚至有更改事件吗？我怎样才能做到这一点？此外，是否有任何带有示例的文档？ http://jqueryui.com 有很多例子，我找不到任何一个显示任何事件触发的例子。我想我对 jQuery 的无知并不能完全解决这种情况。

任何帮助将不胜感激。谢谢。

【问题讨论】：

标签： jquery jquery-ui jquery-ui-button

【解决方案1】：

jQuery-UI 中的按钮没有change 事件。

您应该监听底层单选按钮的更改或点击事件：

http://jsfiddle.net/marcosfromero/kr2Xc/

【讨论】：

虽然这是真的，但您可以监听应用于按钮集的更改事件。看起来像一个 jQuery 复活节彩蛋，但这很好用：$('#tod_quant').buttonset().change(function(){//do stuff});

【解决方案2】：

哈！问题解决了。我整天都在研究这个，它就在我面前。

我只需要将我选择元素的方式更改为：

$('#tod_quant')

【讨论】：

当我写同样的内容时，你的答案就闪现了……糟了！

【解决方案3】：

我遇到了这个问题，我解决了这个问题：我为标签创建了一个事件处理程序：

$('.label-class').click(LabelClicked);
$('.input-class').change(InputChanged);
function LabelClicked() {
    var input = $('#' + $(this).attr('for'));
    if(input) 
        input.trigger('change'); 
    return true;
}
function InputChanged() {
    //do your work with this event
}

别无他法！我测试了几种方法，最终决定这样做

【讨论】：

对于那些使用动态创建的复选框的附加说明，您必须在调用 buttonset() 之后包含事件处理程序。如果您从 ajax 获取字段，则必须在每次更新时完成。仔细想想，这很明显，但我花了相当多的时间检查拼写错误和语法，然后才意识到我在不存在的东西上创建了一个处理程序。

【解决方案4】：

    <script>
    $(function() {
        $( "#radio" ).buttonset();
    });
    </script>



<div class="demo">

<form>
    <div id="radio">
        <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
        <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
        <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
    </div>
</form>

使用此代码并检查您是否包含 jquery.js 和 jqueryui.js 文件。

【讨论】：