When you press the $ () button. ("reset") switches the radio buttons ().

Question

I created a button group with three radio buttons inside. They act as toggle buttons using a JavaScript bootstrap (see http://getbootstrap.com/javascript/#buttons ). I also want to show the loading status when the button is pressed (while the Ajax request is being executed), so I use $().button('loading') .

Code example:

 $(function() { $('input[type=radio][name=option]').change(function() { var $label = $(this).parent(); $label.button('loading'); // Perform Ajax request, simulated with timeout here setTimeout(function() { $label.button('reset'); }, 2000); }); }); 

At first glance, this works, but after pressing all the buttons once, none of the buttons will light up the change event anymore. This has something to do with $().button('reset') , which I use, because after it doesn't work, it works fine.

JS Bin created here: http://jsbin.com/etaMURU/2/edit

Is this a Bootstrap bug or am I just using the API incorrectly?

Answer 1

It can be fixed by delegating these events to the inputs as they are deleted and re-entering the DOM every time you set the state of the button to load.

 $(function() { $('.btn-group').on('change', 'input[type=radio][name=option]', function() { var $label = $(this).parent(); $label.button('loading'); setTimeout(function() { $label.button('reset'); }, 2000); console.log('changed'); }); });