jquery - 单击事件未在 Bootstrap 单选按钮组内触发

Question

我动态创建单选按钮，并使用 on() 函数 try catch 点击并对其执行某些操作。

只要我使用单选按钮，它就可以正常工作。然后，我将单选按钮封装在 Bootstrap 标记中，将其变成按钮组 - 现在，当我单击按钮时，单击事件永远不会触发。不知道我错过了什么!

这是代码

动态生成的标记

 <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>

这是通过 jQuery 选择器选择 radio 并检查是否触发了单击的标记

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

Bootstrap 是否以某种方式干扰 - 或者我错过了某些步骤？我盯着代码，我的眼睛再也看不到错误了。任何帮助/提示表示赞赏!

(PS - 单选按钮被转换为一个漂亮的按钮组，按钮单击并在单击的按钮上保持按下状态等，因此行为看起来很好，除了单击不是通过 on(..) 注册的)

Answer 1

使用更改处理程序，因为点击发生在标签中

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

演示:Fiddle