为什么这个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,它正在修改checkbox元素的DOM结构.您需要使用.change()事件而不是.click():

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

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