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

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 2

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')