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

Posted 2023-05-08

【中文标题】单击事件未在引导单选按钮组中触发

【英文标题】：click event not firing within a bootstrap radio button group

【发布时间】：2014-01-16 22:15:05

【问题描述】：

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

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

这是代码

动态生成的标记

 <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");

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

（PS - 单选按钮被转换为一个漂亮的按钮组，按钮单击并在单击的按钮上保持按下状态等。所以行为似乎很好，除了单击未由 on(..) 注册)

【问题讨论】：

您正在使用attribute starts with selector:'input:radio[id^="q_op_"]'，我从上面复制了您的代码，它对我有用——尽管不是动态创建的单选按钮而是静态的。如何动态创建单选框以及如何触发绑定$(document).on('click', ....) 此外，似乎缺少一些大括号。你能发布更多代码吗？

【参考方案1】：

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

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

演示：Fiddle

【讨论】：

Arun - 我的代码块放错了地方。现在更改功能确实触发了......完成了一个阶段，还有更多问题，但我会标记你的答案，因为它对我有用。谢谢。

对我来说效果很好。

如果您在类或 id '#theID input' 中侦听输入，它也可以工作。

这可以使用原生的addEventListener吗？我不确定 jQuery 在幕后做了什么，但我需要在没有 jQuery 的情况下捕获这个事件。

非常适合我！谢谢。

【参考方案2】：

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

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

【讨论】：

完美，好主意。谢谢。

【参考方案3】：

使用输入的 onchange() 属性。

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