38

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
  • 866
  • 2
  • 12
  • 31
  • You are using the [attribute starts with selector](http://api.jquery.com/attribute-starts-with-selector/): `'input:radio[id^="q_op_"]'` and i copied your code from above and it works for me - altough with not dynamically created radio-buttons but static ones. How do you create the radio-boxes dynamically and how do you fire the binding `$(document).on('click', ....)` Also it seems that some braces are missing. Can you post more code? – surfmuggle Dec 30 '13 at 03:38

3 Answers3

69

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

Arun P Johny
  • 384,651
  • 66
  • 527
  • 531
  • Arun - 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. – Gerry Dec 30 '13 at 04:09
  • 1
    Worked perfectly to me. – Gonzalo Méndez Apr 02 '16 at 15:52
  • It also works if you listen for an input inside a class or id ```'#theID input'```. – ow3n Feb 02 '17 at 21:01
  • Is 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. – Paul Murray Mar 17 '17 at 22:12
  • Worked perfect for me! Thanks. – Caverman May 19 '17 at 19:45
  • Works for me only on the first click. Subsequent clicks doesn't trigger the `onchange` event! `onclick` on the `label` works all the time though. – Old Geezer Sep 02 '18 at 14:51
  • I 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. – kratsg Oct 28 '19 at 20:54
16

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"); 
});
giosh94mhz
  • 2,908
  • 14
  • 25
user1587439
  • 1,637
  • 1
  • 12
  • 8
2

Use onchange() attribute of input.

<input id="3" name="option" type="radio" style="height: 15px;width: 15px;" onchange="alert('changed')">
Ravi Wadje
  • 1,145
  • 1
  • 10
  • 15