Jesus Rodriguez Jesus Rodriguez - 2 months ago 18
jQuery Question

on change event in jquery datatable won't trigger on a dynamically drawn row

This is how I defined my datatable:

$("#table_resultados").DataTable({
//"paging": false,
"ordering": false,
"info": false,
"searching": true,
"autoWidth": true,
"language": {
"lengthMenu": "Mostrar _MENU_ registros. Para Seleccionar, dar click en una fila.",
"zeroRecords": "No se encontraron registros",
"info": "Mostrando pagina _PAGE_ de _PAGES_",
"infoEmpty": "No hay registros disponibles",
"infoFiltered": "(filtrados de un total de _MAX_ registros)",
"search": "Buscar:",
"paginate": {
"previous": "Previa",
"next": "Siguiente"
}
},
"order": [[ 1, 'desc' ],[ 7, 'asc' ]],
"ajax": {
"url": '<?php echo $enlace_procesar_producto;?>',
"type": 'POST',
/*"data": {
"operacion": 'query_categoria',
"id_producto_categoria_padre": $("#categoria2").val(),
"tipo_codificacion_json": 'JS.JSON'
}*/
data: function(d) {
d.operacion = 'query_categoria_producto';
d.id_producto_categoria = $("#id_producto_categoria").val();
d.id_marca = $("#id_marca").val();
d.tipo_codificacion_json = 'JS.JSON';
},
},
"columnDefs": [
{ "targets":[0], className: "dt-body-center",
render: function (data, type, row) {
var ddl = "<input type='hidden' class='pack_hid_id' value='" + data + "'>";
ddl += "<span>" + data + "</span>";
return ddl;
},"width": "10%","searchable": true,
},
{ "targets": [2,3,4,5,6,8,9,10,13,14,15,16,17,18,19,20,21,22,23,24], "visible": false, "searchable": false },
{ "targets": [1], "visible": true, "searchable": true, "width":"20%",
"render": function (data, type, row) {
return row[20];
}
},
{ "targets": [7], "visible": true, "searchable": true, "width": "40%", "orderable": true },
{ "targets": [11], "visible": true, "searchable": false, className: "dt-body-center"},
{
"targets": [12], "visible":true,
"render": function (data, type, row) {
$ddl = Number(row[12]).toFixed(2) + " " + row[15];
$ddl += "<select class='prueba'><option>1</option><option>2</option></select>"
return $ddl;
}, "width": "30%", "className":"dt-body-center"
}
],
"columns": [
{},
{},
{ /*render: function (data, type, row) {
var ddl = "<select size='1' id='row-1-division' name='row-1-division' class='cat_flag_habilitado'>";
ddl += "<option value='" + data+ "'>"+ data + "</option>";
ddl += "<option value='0'>X</option>";
ddl += "</select>";
return ddl;
}*/
},
],
rowCallback: function (row, data) {

}
});


Just for testing purposes I added that with class="prueba", however when I implement the triggering event:

$(".prueba").on("change", function () {
alert("Hola");
});


no pop comes out!!

It's not my jquery version or a missing js, how I know?? The below code DOES work.

$('#table_resultados tbody').on( 'click', 'tr', function () {
$id_producto_pack = $(this).closest("tr").find(".pack_hid_id").val();

if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
$("#id_producto_pack").val(0);
}
else {
$("#table_resultados tr.selected").removeClass('selected');
$(this).addClass('selected');

$("#id_producto_pack").val($id_producto_pack);
}

$("#div_pack_detalle").dialog("open");
$tabla = $("#table_pack_detalle_resultados").DataTable();
$tabla.ajax.reload( null, false );
} );


Any clue?

Answer

It's because your dynamically created selectlist has no event binding.

You can add the binding in the datatable RowCallback, something like this:

rowCallback: function (row, data) {
    var element = $(row).find('.prueba');
    element.on("change", function () {
        alert("Hola");
    });
}