Dlaczego to pole wyboru Bootstrap nie działa z jQuery?

Question

Po zaznaczeniu pola wyboru wejścia, chcę dołączyć wiadomość <div>. Ale jakoś mój kod nie działa. Czy tu czegoś brakuje?

Oto link do tego, co mam do tej pory - 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

Użyłeś Bootstrap, która modyfikuje strukturę DOM elementu wyboru. Trzeba użyć .change() imprezę zamiast .click():

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

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

Answer 2

Zobacz poniższy kod. tutaj użyłem funkcji onchange.

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

Answer 3

Ustawiony obiekt nasłuchujący kliknięć jest usuwany, gdy Bootstrap zmieni twoje pole wyboru.

Poniższy kod doda słuchacza do ciała, więc nie zostaną usunięte z elementu DOM, natomiast Bootstrap wykonuje swoją pracę

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