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

、チェックボックス要素のDOM構造を変更している -

は、ここで私はこれまで持っているものへのリンクです。

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

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

Answer 2

次のコードを参照してください：あなたは代わりに.click()の.change()イベントを使用する必要があります。ここで私はonchange関数を使用しました。

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

Answer 3

Bootstrapがチェックボックスを変更すると、設定しているクリックリスナーが削除されています。

次のコードでは、身体にリスナーを追加しますので、ブートストラップは、その作業

$('body').on('click', '#inp', function(){ 
    //do append 
})