JQuery .on (‘clic’) no funciona en DataTables segunda página o filas pasadas de 11

Tengo un enlace jQuery que se ejecuta en una lista dinámica para cada fila cuando se hace clic en el hipervínculo.

Esto funciona antes de que se aplique datatables, pero una vez que datatables se aplica la undécima fila (después de cambiar la pantalla a un valor superior al 10 predeterminado) o cuando está en otra página, ya no se llama a jQuery.

Intenté tirar esto en jsFiddle y funciona allí, así que no puedo reproducirlo en jsFiddle por algún motivo.

Cualquier puntero en la dirección correcta sería muy apreciado.

PHP:

echo ""; echo ""; foreach($array as $arr){ echo ""; } echo "
Test1Test2
" . $arr['test1'] . "
"; echo "" . $arr['test2'] . ""; echo "
";

jQuery

 $(function(){ $('.test').on('click', '.toggleTest', function(e){ var id = $(this).data('id'); $("#test-"+id).html("Done"); return false; }); }); $(document).ready(function() { $('#paginatedTable').dataTable(); } ); 

Debe vincular el controlador a un elemento estático, no a las filas que se pueden agregar dinámicamente. Entonces debería ser:

 $("#paginatedTable").on("click", ".test .toggleTest", function ...); 

Otra solución fácil que acabo de encontrar es simplemente agregar una función que utiliza un controlador de componente para actualizar el DOM en cualquier redibujado de DataTables.

Se puede usar como:

 $(document).ready(function(){ var table = $('#table-1').DataTable({ "fnDrawCallback": function( oSettings ) { componentHandler.upgradeDOM(); } }); }); 

Solucionó mis problemas de paginación cuando estaba usando un menú desplegable en una de las columnas.

Hay algunas cosas que pueden salir mal aquí:

  • El enlace de su evento está en los elementos que se reemplazan, debe usar algo como:
    $('#paginatedTable').on('click', '.toggleTest', function(e){
  • Parece que no estás escapando de tu html para que los datos puedan romperlo:
    htmlspecialchars($arr['test2'])
    (en lugar de solo $arr['test2'] , podría aplicarse a otras variables también)

He seguido la respuesta de @Barmar.

junto con eso, he completado el clic en la función document.ready, luego funcionó para mí.

 $(document).ready(function() { $('#dmtable tbody').on( 'click', 'tr td.details-control', function () { } } );