Change jQuery button set

Question

I am new to jQuery and thought that I would use my own set of buttons instead of some radio buttons in my application. Documentation here: http://jqueryui.com/demos/button/#radio

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

Here is the code snippet I tried:

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

And then further 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 an event of change? How can i do this? Also, is there any documentation with an example? http://jqueryui.com there are many examples, and not one of them that I can find shows what events are triggered. I believe that my ignorance of jQuery does not completely help the situation.

Any help would be greatly appreciated. Thanks.

Answer 1

Ha! The problem is solved. I've been hacking all day, and it was right in front of me.

I just needed to change the way the element was selected:

 $('#tod_quant') 

Answer 2

There are no change events for buttons in jQuery-UI.

You must listen to the changes or click on the event of the basic buttons:

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

Answer 3

I had this problem and solved it as shown 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 } 

there is no other way! I checked several ways and finally decided to do it

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 if you include jquery.js and jqueryui.js files or not.