Aggiunta di eventi alla casella di controllo creata in modo dinamico in jquery mobile

Question

Ho creato la mia casella di controllo in modo dinamico nella mia pagina. Voglio aggiungere un evento click per tutte le caselle di controllo create in modo dinamico.

ecco il mio codice.

<div data-role="fieldcontain"> 
     <fieldset data-role="controlgroup" id="br"> 

     </fieldset> 
</div> 

ho creato dinamicamente caselle di controllo e aggiunto al fieldset.

$.getJSON("http://localhost/WebSite/", 
    function(data){ 
    var branchOp=""; 
     $.each(data.branch, function(i,item){ 
     branchOp += '<input type="checkbox" name="branch" id="'+item.branchCode+'" value="'+item.branchCode+'" class="branch"><label for="'+item.branchCode+'">'+item.branchName+'</label>'; 
     $(item.branchCode).addClass("intro");  
     }); 
     $('#br').append(branchOp).trigger("create"); 
     }); 

utilizzo su(), live(), deligate() metodo per aggiungere gestori di eventi nelle caselle di controllo.

$('#br').delegate('click','input:checkbox', function(event) { 
    alert('selected'); 
}); 



$('#br').on('click','input:checkbox', function(event) { 
alert('selected'); 
}); 

nulla sta lavorando per me ...

Answer 1

Con i tasti casella di controllo/radio, utilizzare change evento.

Demo

$(document).on('change', '[type=checkbox]', function() { 
// code here 
}); 

Inoltre, è possibile utilizzare click ma sul div avvolgendo la casella di controllo.

$(document).on('click', 'div.ui-checkbox', function() { 
    // code here 
}); 

Answer 2

per un pulsante dinamicamente aggiunto all'interno di un elenco comprimibile (o nulla) faccio questo:

$(document).on("click", "#listaEntrada input", function(evt) { 
     var txSeleccionado = $(this).text(); //<-El Texto Seleccionado 
     console.log(evt); 
}); 

Answer 3

Prova questa, che sta lavorando per caselle di controllo aggiunti dinamicamente.

$(document).on("click", "INPUT[id^=checkboxId_]", function (event) { 
    var targetId = event.target.id; 

    if ($("#" + targetId + ":checked").length > 0) { 
     alert('checked'); 
    } 
    else { 
     alert('unchecked'); 
    } 
});