在Bootstrap单选按钮组中，点击事件无法触发

Question

我动态地创建了单选框，并使用 on() 函数尝试捕获点击事件并对其进行处理。

只要我使用单选框，它就工作得很好。然后，我将单选框封装在 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选择器选择单选按钮并检查是否已点击的标记。

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

Bootstrap是否以某种方式干扰了 - 还是我错过了某些步骤？我正在盯着代码看，我的眼睛再也没有发现错误了。任何帮助/提示都将不胜感激！

（附注 - 单选按钮会转换为漂亮的按钮组，按下按钮后按钮会保持按下状态等，因此行为似乎很好，除了on（..）未注册的点击事件）

- Gerry

---

你正在使用 属性开始选择器：'input:radio[id^="q_op_"]'，我从上面复制了你的代码，并且它对我也有效 - 尽管这是针对静态而不是动态创建的单选按钮。 你如何动态创建单选框，以及如何触发绑定 $(document).on('click', ....)? 此外，似乎缺少一些大括号。你能发布更多的代码吗？ - surfmuggle

Answer 1

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

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

演示：Fiddle

- Arun P Johny

---

Arun - 我的代码块放错了位置。现在更改函数确实被触发了...一个阶段完成，还有更多问题，但我会将你的答案标记为有效。谢谢。 - Gerry

对我来说完美地工作了。 - Gonzalo Méndez

如果你在类或id'#theID input'内监听输入，它也可以工作。 - ow3n

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

对我来说完美地工作了！谢谢。 - Caverman

Answer 2

我也遇到了这个问题。但是我没有将事件监听器放在单选按钮上，而是放在标签上，例如：

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

- user1587439

---

完美，好主意。谢谢。 - realmikep

Answer 3

使用元素的onchange()属性。

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

- Ravi Wadje