click event not firing within a bootstrap radio button group
Solution 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
Solution 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");
});
Solution 3
Use onchange() attribute of input.
<input id="3" name="option" type="radio" style="height: 15px;width: 15px;" onchange="alert('changed')">
Gerry
Updated on February 19, 2020Comments
-
Gerry about 4 years
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(..) )
-
Gerry over 10 yearsArun - my code block was in the wrong place. Now the change function does fire... one stage done, there are more issues but I will mark you answer as it worked for me. Thanks.
-
realmikep about 9 yearsPerfect, great idea. Thanks.
-
Gonzalo Méndez about 8 yearsWorked perfectly to me.
-
ow3n over 7 yearsIt also works if you listen for an input inside a class or id
'#theID input'
. -
Paul Murray about 7 yearsIs this possible using the native
addEventListener
? I'm not sure what jQuery is doing under the hood, but I need to capture this event without jQuery. -
Caverman almost 7 yearsWorked perfect for me! Thanks.
-
Old Geezer over 5 yearsWorks for me only on the first click. Subsequent clicks doesn't trigger the
onchange
event!onclick
on thelabel
works all the time though. -
kratsg over 4 yearsI should note that this solution worked for me in Bootstrap 4. Something like
$("input[type=radio][name=particles-condition]").on("change", filter);
was basically perfect for me.