I am creating an editor function on a website using a set of radio buttons based on jQuery buttons. When I load an element into the editor, I need to set the selected switch, and, of course, the user can change this parameter and get it in the database. When the item closes, I want to reset the default button set.
The problem is that when I install a set of buttons, it fires the first time each item is selected, then it breaks and stops working together.
Demonstration of the problem: http://jsfiddle.net/kallsbo/vSmjb/
HTML:
<div id="dumpSec"> <input type="radio" name="security" id="r_public" value="public" class="rSec"> <label for="r_public"><i class="icon-globe"></i> Public</label> <input type="radio" name="security" id="r_private" value="private" class="rSec"> <label for="r_private"><i class="icon-lock"></i> Private</label> <input type="radio" name="security" id="r_link" value="link" class="rSec"> <label for="r_link"><i class="icon-link"></i> Anyone with the link</label> </div> <div> If you use the buttons below you can programmatically select each of the radios in the buttonset once before it all breaks down... </div> <div> <button id="nbr1">Select Private</button><br/> <button id="nbr2">Select Link</button><br/> <button id="nbr3">Select Public</button><br/> </div>
JavaScript:
// Basic function $("#dumpSec").buttonset(); $("#r_public").attr("checked", true); $("#dumpSec").buttonset('refresh'); // Put in functions on the demo buttons $( "#nbr1" ) .button() .click(function( event ) { $("#r_private").attr("checked", true); $("#dumpSec").buttonset('refresh'); }); $( "#nbr2" ) .button() .click(function( event ) { $("#r_link").attr("checked", true); $("#dumpSec").buttonset('refresh'); }); $( "#nbr3" ) .button() .click(function( event ) { $("#r_public").attr("checked", true); $("#dumpSec").buttonset('refresh'); });
I tried several things, such as trying to invoke the label click function for each switch, and so on, but I cannot find anything that works. Any input is appreciated!
source share