Javascript onclick for Bootstrap.btn group复选框在JSFIDLE中有效，但在浏览器中无效

下表包含使用复选框的引导切换按钮组。我需要监听复选框输入上的点击事件

这在中工作良好-当您在按钮组中选择一个选项时，处理程序会按预期将基础复选框的值打印到控制台

但是，当我在浏览器中运行页面并进行选择时，处理程序不会启动，即控制台不会打印任何内容。为什么会这样？我复制的文档与JSFIDLE iframe中显示的文档完全相同，并且还尝试在Chrome v85和Firefox v78.0.2上运行它，但没有成功

注意：当页面最初加载到浏览器中时，result-light.css样式表出现404错误，但它看起来只是一个小提琴样式表，删除它没有任何效果

另外，我需要专门听点击事件，所以“改变”不会有帮助

注意：我注意到Bootstrap使用属性指针事件设置复选框输入的样式：none；，这可能是导致单击处理程序在浏览器中无响应的原因吗？将其设置为“初始”或“继承”似乎没有效果

编辑：我投票决定结束这个问题，因为这个问题是我的错误。在发帖时，我还没有意识到我在浏览器中运行的脚本使用的是Bootstrap3.4.1，而JSFIDLE使用的是更新的版本4.4.1

我可能错了，但我认为浏览器脚本中没有触发单击处理程序的原因是Boostrap 3.4.1的按钮数据API部分：

本节防止在收音机上双击，以及在复选框上双击，因此未包含在v4.4.1中。从v3.4.1的源代码中手动省略它会使单击处理程序按预期响应

---

如果我必须按原样使用v3.4.1，我可以在收音机和复选框仍然接收焦点时，将单击切换为焦点。看到这里。

我无法解释为什么它在JSFIDLE中工作，但是看起来复选框实际上隐藏在按钮后面。您是要提交此表单，还是只是根据选择对页面执行jquery？如果是我，你想保留按钮，你可以这样做：

<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>

---

我尽力把你的问题解释清楚。这是我的JSFIDLE：我希望它能有所帮助

作为一名程序员，最难的部分是问问题。说得好的问题是解决了一半的问题。这是真的。如果这不是你想要的答案，请改进你的问题，并确保再次提问。总的来说：记住将jQuery代码封装在$document.ready中，并继续试验和学习HTML、CSS和引导。例如，我注意到您的HTML标签标记缺少For属性，并且div和输入字段上的类名重复提示：仅div需要Bootstrap类。。祝你一切顺利

我使用的资源：

复制/粘贴内联复选框

---

表单将被验证，我正在使用的插件需要将验证规则附加到输入标签上，所以很遗憾，我无法删除它们。对不起！我大胆地提出了我的问题，希望现在问题更清楚了？我对$document.ready使用了缩写$function{…}，所以这不是问题所在。我曾试着设置，但没用。我可能是错的，但我的示例中的每个标签标记都只包含一个输入控件，因此即使没有for属性，它也会自动与该输入控件关联。至于类，它们是根据引导的示例分配的。请显示一个可以在JSFIDLE外部复制问题的标签。例如，如果只复制iframe主体的内容，则没有加载jQuery，因此jQuery代码将无法工作。你应该看到一个错误。如果我复制整个body，然后转到head，将除了jsFiddle cruft之外的所有脚本和链接元素复制到我的新文档中的head中，并删除body？？？中的两个jsFiddle脚本，它在本地工作得很好@T.J.克劳德，非常感谢你回来。我复制了JSFIDLE iframe的全部内容，不确定要省略哪些脚本，因此为了简洁起见，我的文章中没有包含head标记。我也在R工作，没有意识到它加载的依赖关系会干扰我的工作。当我运行你的pastebin代码时，它完全按照预期工作。它还帮助我隔离了我认为存在的问题。R使用的是Bootstrap 3.4.1的旧版本，我在我的帖子中修改了代码以反映这一点-你能确认错误现在是否可以重现吗？问题中更新的代码在JavaScript中有语法错误：单引号前面的反斜杠不应该存在。如果我修复了这些问题，单击复选框不会触发任何console.log调用。如果删除引导，则会发生调用。我希望这能帮上忙。哎呀，我需要这些来逃离R。我拿了t 下摆。我仍在试图弄清楚为什么在使用较旧版本的引导时不会发生调用。谢谢你的帮助！

$(function() {
    
  $('#fname input').click(function() {
    console.log('you clicked '+$(this).attr('value'))
  });

});

// 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')
}

<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>