При изменении события в jquery 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> с 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 ); 
} );

Любая подсказка?

Источник

2 ответа

Решение

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

Вы можете добавить привязку в таблицу данных RowCallback, что-то вроде этого:

rowCallback: function (row, data) {
    var element = $(row).find('.prueba');
    element.on("change", function () {
        alert("Hola");
    });
}
Источник

То, что также работало для меня, было переопределением события "onchange" следующим образом:

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

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

Источник
Другие вопросы по тегам