jQuery buttonset change

Question

I'm new to jQuery and thought I would use its buttonset instead of some radio buttons on my application. Documentation here: http://jqueryui.com/demos/button/#radio

How do I add a handler to an event when the set of buttons changes value?

Here is a snippet of the code I tried:

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

And then later on in the 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>

The "change" event never fires. Is there even a change event? How can I do this? Furthermore, is there any documentation with an example? http://jqueryui.com has plenty of examples, and not a single one that I can find shows any events firing. I suppose my ignorance of jQuery isn't exactly helping the situation.

Any help would be most appreciated. Thank you.

Answer 1

Ha! Problem solved. I've been hacking at this all day, and it was right in front of me.

I just needed to change how I was selecting the element to this:

$('#tod_quant')

Answer 2

There's no change event for buttons in jQuery-UI.

You should listen to change or click event of the underlying radio-buttons:

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

Answer 3

I had this problem, and I solved this as below: I created an event handler for labels:

$('.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
}

no other way! I tested several ways and finally decided to do this

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

use this code and check whether you are including the jquery.js and jqueryui.js files or not.