单击引导单选按钮组中的未触发事件

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

我动态创建单选按钮，并使用on()函数捕获单击并对其进行处理。

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

下面是通过jQuery选择器选择广播并检查单击是否被触发的标记

$(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(..) )

(PS -这些单选按钮被转换成一个漂亮的按钮组，按钮点击并按下点击按钮等等)，所以行为看起来很好，只是点击没有按on(..)进行注册。

3 个解决方案

#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

演示:小提琴

#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.:

我也有过这样的挑战。但是我没有把eventlistener放在单选按钮上，而是把它们放在标签上，也就是:

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

#3

Use onchange() attribute of input.

使用输入的onchange()属性。

<input id="3" name="option" type="radio" style="height: 15px;width: 15px;" onchange="alert('changed')">

#1