на событии изменения в Jquery DataTable не будет вызывать на динамически нарисованную строке

Question

Это, как я определил мой 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) { 

    }      
}); 

Только для целей тестирования я добавил, что <select> с классом = «Prueba», однако при Я реализую инициирующее событие:

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

no pop выходит !!

Это не моя версия jquery или отсутствует js, как я знаю ??? Код ниже работает.

$('#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); 
}); 

Любые подсказки?

Answer 1

Это потому, что ваш динамически созданный selectlist не имеет привязки к событию.

Вы можете добавить связывание в DataTable RowCallback, что-то вроде этого:

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

Answer 2

Что также работал для меня был реализовав «OnChange» событие ниже образом:

$("#table_resultados").on("change",".prueba", function() {}); 

Это полностью сделал Хитрость!. Спасибо за помощь ребята.