引导单选按钮不调用 jQuery 更改事件处理程序？答案

【问题标题】：jQuery change event handlers not called for Bootstrap radio buttons?引导单选按钮不调用 jQuery 更改事件处理程序？
【发布时间】：2016-10-14 19:25:50
【问题描述】：

我的 Bootstrap 单选按钮的 jQuery 更改事件处理程序未被调用。我做错了什么？

请注意，我不想将事件处理程序添加到 input 或 input[type=radio]。我想按 ID 添加事件处理程序。

Plunker 链接：http://plnkr.co/edit/Bq30RuT1ypsh1pJk3dxD

$(function(){
  $('#listen').change(function(){
    log('listen');
  });
  $('#browse').change(function(){
    log('browse');
    
  });
  $('#edit').change(function(){
    log('edit');
  });
  
  function log(str) {
    let x = $('#log').html();
    x += str + '<br/>';
    $('#log').html(x);
  }
  
  log('empty');
});

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    
    <h1>Hello Plunker!</h1>
    <form>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-secondary active">
            <input id="listen" type="radio" autocomplete="off" checked> Listen
        </label>
        <label class="btn btn-secondary">
            <input id="browse" type="radio" autocomplete="off"> Browse
        </label>
        <label class="btn btn-secondary">
            <input id="edit" type="radio" autocomplete="off"> Edit
        </label>
    </div>
    </form>
    <div id="log">
      
    </div>
    
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
  
  </body>

</html>

【问题讨论】：

标签： javascript jquery twitter-bootstrap bootstrap-4

【解决方案1】：

请改一下：

    <label id="listen" class="btn btn-secondary active">
        <input type="radio" autocomplete="off" checked> Listen
    </label>
    <label id="browse" class="btn btn-secondary">
        <input type="radio" autocomplete="off"> Browse
    </label>
    <label id="edit" class="btn btn-secondary">
        <input type="radio" autocomplete="off"> Edit
    </label>

【讨论】：

【解决方案2】：

我认为问题在于事件未处理，因为您单击的是标签标签而不是单击收音机

【讨论】：

【解决方案3】：

问题是标签越过单选按钮并拦截点击/更改事件。

像这样改变你的html

<form>
<div class="btn-group" data-toggle="buttons">
        <input id="listen" type="radio" autocomplete="off" checked> Listen

        <input id="browse" type="radio" autocomplete="off"> Browse

        <input id="edit" type="radio" autocomplete="off"> Edit

</div>
</form>

试试这个

$(document).ready(function(){
   $('#listen').click(function(){
      log('listen');
   });
  $('#browse').click(function(){
      log('browse');
  });
  $('#edit').click(function(){
      log('edit');
  });
});
function log(str) {
     let x = $('#log').html();
     x += str + '<br/>';
     $('#log').html(x);
 }

【讨论】：

不起作用，请在回答前使用上面的 Plunker 链接，谢谢 ;-)
猜猜第一个版本没有用，这个版本被删除了必要的标签元素。