Bootstrap .btn-group复选框的onclick可在JSFiddle中使用，但不能在浏览器中使用 [英] onclick for Bootstrap .btn-group checkbox works in JSFiddle but not browser
问题描述
下面的表单包含一个使用复选框的Bootstrap切换按钮组. 我需要在复选框输入中监听点击事件.
The form below contains a Bootstrap toggle button group that uses checkboxes. I need to listen for click events on the checkbox inputs.
<html>
<head>
<title>Example: Bootstrap toggle button group</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.js"></script>
</head>
<body>
<form role="form" id="form">
<div class="form-group">
<div>
<div>
<label for="fname">Name:</label>
</div>
<div id="fname" class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary">
a
<input type="checkbox" value="a" name="fname">
</label>
<label class="btn btn-primary">
b
<input type="checkbox" value="b" name="fname">
</label>
<label class="btn btn-primary">
c
<input type="checkbox" value="c" name="fname">
</label>
</div>
</div>
</div>
</form>
<script type="text/javascript">//<![CDATA[
$(function() {
$('#fname input').click(function() {
console.log('you clicked '+$(this).attr('value'))
});
});
//]]></script>
</body>
</html>
就本示例而言，我已经注册了以下处理程序，该处理程序在单击时会打印复选框的值:
For the purpose of this example, I have registered the following handler that prints the value of a checkbox when clicked:
$(function() {
$('#fname input').click(function() {
console.log('you clicked '+$(this).attr('value'))
});
});
在( JSFiddle )中可以正常使用-当您在按钮中选择一个选项时组，处理程序将按预期方式将基础复选框的值打印到控制台.
This works fine in (JSFiddle) - when you select an option in the button group, the handler prints the value of the underlying checkbox to the console as expected.
但是，当我在浏览器中运行该页面并进行选择时，该处理程序不会启动，即控制台上没有任何内容.为什么会这样??我完全复制了JSFiddle iframe中显示的文档，并尝试在Chrome(v85)和Firefox(v78.0.2)上都无法运行.
But when I run the page in my browser and make a selection, the handler does not fire, i.e. nothing is printed to the console. Why is this? I have copied the document exactly as it appears in the JSFiddle iframe and have also tried running it on both Chrome (v85) and Firefox (v78.0.2) to no avail.
注意: result-light.css样式表存在404错误，该问题最初是在页面最初加载到浏览器中时出现的，但它看起来只是Fiddle样式表，删除时没有任何错误.效果.
Note: There is a 404 error for the result-light.css stylesheet that results when the page initially loads in the browser but it looks to be just a Fiddle stylesheet and removing it doesn't have any effect.
此外，我需要专门监听点击事件，因此on('change'不会有帮助.
Also, I need to listen for click events specifically so on('change' will not help.
注意::我注意到Bootstrap使用属性pointer-events: none;为复选框输入设置样式，这可能是导致点击处理程序在浏览器中无响应的原因吗?将其设置为initial或inherit似乎没有效果.
Note: I noticed that Bootstrap styles the checkbox inputs with property pointer-events: none;, could this be what's causing the click handler to be unresponsive in the browser? Setting it to initial or inherit does not seem to have an effect.
编辑:由于该问题是我的错误，我已投票决定要关闭此问题.发布时，我还没有意识到我在浏览器中运行的脚本使用了Bootstrap 3.4.1，而JSFiddle使用了较新的版本4.4.1.
I've voted to close this question as the problem was a mistake on my part. At the time of posting, I hadn't realised that the script I was running in my browser used Bootstrap 3.4.1 whereas the JSFiddle used a newer version 4.4.1.
我可能是错的，但是我认为click处理程序未在浏览器脚本中触发的原因是由于Boostrap 3.4.1的Button data-API部分的
I could be wrong, but I think the reason why the click handler didn't fire in the browser script was due to the Button data-API section of Boostrap 3.4.1's source code:
// BUTTON DATA-API
// ===============
if (!($(e.target).is('input[type="radio"], input[type="checkbox"]'))) {
// Prevent double click on radios, and the double selections (so cancellation) on checkboxes
e.preventDefault()
// The target component still receive the focus
if ($btn.is('input,button')) $btn.trigger('focus')
else $btn.find('input:visible,button:visible').first().trigger('focus')
}
本节防止在单选按钮上双击以及在复选框上进行两次选择，并且不包括在v4.4.1中.从v3.4.1的源中手动省略它会使click处理程序按预期响应.
This section prevents double clicks on radios, and double selections on checkboxes and was left out of v4.4.1. Manually omitting it from the v3.4.1's source makes the click handler responsive as expected.
如果我必须按原样使用v3.4.1，则可以将click替换为focus，因为单选框和复选框仍会获得焦点.参见 JSFiddle .
If I had to use v3.4.1 as is, I could swap the click for focus as the radios and checkboxes still receive focus. See this JSFiddle.
推荐答案
我无法解释为什么它在JSFiddle中运行，但是看起来该复选框实际上隐藏在按钮后面.您是要提交此表单，还是只是根据选择对页面进行一些jquery?如果是我并且您想要保留按钮，则可以执行以下操作:
I can't explain why it is working in JSFiddle, however it looks like the checkbox is essentially hiding behind the button. Are you going to be submitting this form, or just doing some jquery to the page based on selection? If it were me and you want to keep the buttons you can do this:
<form role="form" id="form">
<div class="form-group">
<div>
<div>
<label for="fname">Name:</label>
</div>
<div id="fname" class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary" data-value="a">
a
</label>
<label class="btn btn-primary" data-value="b">
b
</label>
<label class="btn btn-primary" data-value="c">
c
</label>
</div>
</div>
</div>
</form>
<script>
$(function() {
$('#fname label').click(function() {
console.log('you clicked '+$(this).data('value'))
});
});
</script>
这篇关于Bootstrap .btn-group复选框的onclick可在JSFiddle中使用，但不能在浏览器中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
