Question

I generate this table:

with this:

$.ajax({
    type: "POST",
    url: action,
    data: dataToSearchProfile,
    dataType: "json",
    success: function(response) {

       if(response.success == "success") {
             $('#rBuscarPerfil tr:gt(0)').remove();
             $.each(response, function (index,record){
                 var row = $("<tr class='"+record.IdPerfil+"'/>");
                 $("<td />").text(record.NomPerfil).appendTo(row);
                 $("<td />").text(record.DesPerfil).appendTo(row);
                 $("<td />").html("<a href='#'>Modificar</a>").appendTo(row);
                 if (record.EdoPerfil == 1) {
                    $("<td />").html("<input class='"+record.IdPerfil+"' type='checkbox' checked/>").appendTo(row);
                    row.css("backgroundColor","#bbf2b5");
                 } else {
                      $("<td />").html("<input class='"+record.IdPerfil+"' type='checkbox' />").appendTo(row);
                      row.css("backgroundColor","#fcbfc4");
                 }
                 row.appendTo("#rBuscarPerfil");
            });
       } else {
             $('#errorSearchProfile').html("No se han encontrado resultados para: <b>"+termSearch+"</b>").css("color","red");
       }
  }

});

And when the user check in any checkbox in table, will execute a instruction from change background to row (green if is checked and red if is unchecked) then will execute another function ajax to update record in database and more.. but what interests me most is knowing how to listen to each checkbox to execute an instruction.

I hope can help me please!

Answer 1

Just put a delegate for click on your table #rBuscarPerfil. Since you’re creating the rows dynamically. Any events you create on the rows themselves (before they are created) won’t work.

Demo: http://jsfiddle.net/ThinkingStiff/Y355x/

Script

$( '#rBuscarPerfil' ).on( 'click', 'input[type="checkbox"]', function() {
    $( this ).closest( 'tr' ).toggleClass( 'green' );
});​

HTML

<table id="rBuscarPerfil">
    <tr class="green"><td>1</td><td><input class="1" type="checkbox" checked/></td></tr>
    <tr><td>2</td><td><input class="1" type="checkbox"/></td></tr>
    <tr class="green"><td>3</td><td><input class="1" type="checkbox" checked/></td></tr>
</table>​

CSS

tr {
    background-color: red;
}

.green {
    background-color: green !important;
}​