jquery - 为什么这个 Bootstrap 复选框不能与 jQuery 一起使用？

Question

当选中输入复选框时，我想附加 <div>有一条消息。但不知怎的，我的代码似乎不起作用。我在这里遗漏了什么吗？

这是我迄今为止所掌握的内容的链接 - http://jsbin.com/petewadeho/edit?html,output

<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">

  <input id="inp" type="checkbox" data-toggle="toggle" />

  <div id="out"></div>

  <script>
    $('#inp').click(function() {
      if (this.checked) {
        $("#out").append("hey");
      }
    });
  </script>

Answer 1

您已经使用了Bootstrap，它正在修改复选框元素的DOM结构。您需要使用 .change() 事件而不是 .click():

$('#inp').change(function(){
  if (this.checked) {
      $("#out").append("hey");
  }
}); 

http://jsbin.com/kenekekose/1/edit?html,output