Question

我动态创建单选按钮并使用on（）函数尝试捕获单击并使用它执行某些操作。

只要我使用单选按钮就可以了。然后，我将单选按钮封装在引导标记中，将其转换为按钮组 - 现在，当我单击按钮时，click事件永远不会触发。不知道我错过了什么！

这是代码

动态生成的标记

 <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选择器选择广播的标记，并检查点击是否被触发

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

bootstrap会以某种方式干扰 - 或者我错过了一些步骤？我正盯着代码，我的眼睛不再犯错了。任何帮助/提示赞赏！

（PS - 单选按钮转换为漂亮的按钮组，按钮单击并保持按下单击的按钮等等，所以行为似乎没问题，除了点击没有注册（...））

Answer 1

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

中

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

演示：Fiddle

Answer 2

我也遇到过挑战。但是我没有将eventListeners放在单选按钮上，而是将它们放在标签上，即：。

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

Answer 3

使用输入的onchange（）属性。

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

单击事件不在引导单选按钮组中触发

3 个答案: