jquery - jquery 数据表中的更改事件不会在动态绘制的行上触发

Question

这就是我定义数据表的方式:

$("#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>使用 class="prueba"，但是当我实现触发事件时:

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

没有弹出来!!

这不是我的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

对我也有用的是通过以下方式重新实现“onchange”事件:

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

这完全成功了!感谢大家的帮助。