Question

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

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

使用的弹出链接：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

请改变这个：

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

Answer 2

我认为问题是没有处理事件，因为您点击了标签标签而不是点击广播

Answer 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);
 }

jQuery更改事件处理程序没有调用Bootstrap单选按钮？

3 个答案: