click event not firing within a bootstrap radio button group

Question

I create radio buttons dynamically and using a on() function try to capture the click and do something with it.

As long as I used radio buttons it worked fine. I then encapsulated the radio buttons within a bootstrap markup to turn it into a button group - now when I click the button the click event never fires. No idea what I'm missing!

Here's the code

the markup that's generated dynamically

 <div id="q_opt" class="btn-group" data-toggle="buttons">         <label class="btn btn-default active" id="d_op_0"> <input id="q_op_0" name="op" type="radio" value="0">22%     </label>     <label class="btn btn-default" id="d_op_1"> <input id="q_op_1" name="op" type="radio" value="1">19%     </label>     <label class="btn btn-default" id="d_op_2"> <input id="q_op_2" name="op" type="radio" value="2">11%     </label>     <label class="btn btn-default" id="d_op_3"> <input id="q_op_3" name="op" type="radio" value="3">42%     </label>     <label class="btn btn-default" id="d_op_4"> <input id="q_op_4" name="op" type="radio" value="4">8%</label> </div> 

Here's the markup that selects the radio via a jQuery selector and checks if a click was fired

$(document).on('click', 'input:radio[id^="q_op_"]', function(event) {     alert("click fired"); } 

Is bootstrap interfering in some way - or am I missing some step? I'm staring at the code and my eyes aren't catching a mistake anymore. Any help / tips appreciated!

(PS - the radio buttons get converted to a nice looking button group, the buttons click and stay pressed on the ones clicked etc. so the behavior seems fine, except that the click isn't registered by on(..) )

Answer 1

Use the change handler instead because the click are happening in the label

$(document).on('change', 'input:radio[id^="q_op_"]', function (event) {     alert("click fired"); }); 

Demo: Fiddle

Answer 2

I had a challenge with this too. But instead of putting the eventListeners on the radio buttons, I put them on the label i.e.:

$('#d_op_1').on("click",function(){     alert("click fired");  });