Perché questa casella di controllo Bootstrap non funziona con jQuery?

Question

Quando la casella di spunta input è selezionata, voglio aggiungere con un messaggio. Ma in qualche modo il mio codice non sembra funzionare. Mi sto perdendo qualcosa qui?

Ecco un link a quello che ho finora - 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

Hai usato Bootstrap, che sta modificando la struttura del DOM dell'elemento casella di controllo. È necessario utilizzare .change() evento invece di .click():

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

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

Answer 2

Vedere il seguente codice. qui ho usato la funzione onchange.

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

Answer 3

Il click listener che si sta impostando viene rimosso quando Bootstrap modifica la casella di controllo.

Il seguente codice aggiungerà l'ascoltatore al corpo, in modo da non ottenere rimosso con l'elemento DOM, mentre Sputafuoco fa il suo lavoro

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