单击事件未在引导单选按钮组内触发 [英] click event not firing within a bootstrap radio button group

问题描述

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

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

这是代码

动态生成的标记

 
<label class="btn btn-default active" id="d_op_0"><input id="q_op_0" name="op" type="radio" value="0">22%<label class="btn btn-default" id="d_op_1"><input id="q_op_1" name="op" type="radio" value="1">19%<label class="btn btn-default" id="d_op_2"><input id="q_op_2" name="op" type="radio" value="2">11%<label class="btn btn-default" id="d_op_3"><input id="q_op_3" name="op" type="radio" value="3">42%<label class="btn btn-default" id="d_op_4"><input id="q_op_4" name="op" type="radio" value="4">8%</label>

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

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

引导程序是否以某种方式干扰 - 还是我错过了某些步骤?我盯着代码，我的眼睛不再看错了.感谢任何帮助/提示！

(PS - 单选按钮被转换为一个漂亮的按钮组，按钮点击并在点击的按钮上保持按下状态等.所以行为看起来很好，除了点击没有被 on(..))

解决方案

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

$(document).on('change', 'input:radio[id^="q_op_"]', function (event) {alert("点击被触发");});

演示:小提琴

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

解决方案

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

这篇关于单击事件未在引导单选按钮组内触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！