jQuery 更改不为 Bootstrap 单选按钮调用的事件处理程序？

Question

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

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

Plunker link 一起玩：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>

Answer 1

问题是标签越过单选按钮并拦截了 click/change 事件。

像这样改变你的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);
 }

Answer 2

我认为问题是事件没有被处理，因为你点击的是 label 标签而不是单选按钮

Answer 3

请更改：

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

jQuery 更改不为 Bootstrap 单选按钮调用的事件处理程序？

jQuery change event handlers not called for Bootstrap radio buttons?

javascript

jquery

twitter-bootstrap

bootstrap-4