jQuery 单击事件未在引导单选按钮组内触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20832568/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
click event not firing within a bootstrap radio button group
提问by Gerry
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(..) 注册）
回答by Arun P Johny
回答by user1587439
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.:
我也遇到了这个挑战。但是我没有将 eventListeners 放在单选按钮上，而是将它们放在标签上，即：
$('#d_op_1').on("click",function(){
alert("click fired");
});
回答by Ravi Wadje
Use onchange() attribute of input.
使用输入的 onchange() 属性。
<input id="3" name="option" type="radio" style="height: 15px;width: 15px;" onchange="alert('changed')">
