web-dev-qa-db-fra.com

JQuery .on ('clic') ne fonctionne pas dans la 2e page de DataTables ou les lignes après 11

J'ai un lien jQuery qui s'exécute sur une liste dynamique pour chaque ligne lorsque le lien hypertexte est cliqué.

Cela fonctionne avant que les tables de données ne soient appliquées, mais une fois que celles-ci sont appliquées, la 11ème ligne (après avoir modifié l'affichage au-dessus de la valeur par défaut de 10) ou sur une autre page, jQuery n'est plus appelé.

J'ai essayé de lancer ceci dans un jsFiddle et cela fonctionne ici, donc je ne peux pas le reproduire dans un jsFiddle pour une raison quelconque.

Tous les indicateurs dans la bonne direction seraient très appréciés.

PHP:

echo "<table id='paginatedTable'>";
echo "<thead><th>Test1</th><th>Test2</th></thead><tbody>";
foreach($array as $arr){
 echo "<tr><td>" . $arr['test1'] . "</td><td><div class='test'>";
 echo "<a href='#' class='toggleTest' data-id='". $arr['id']."' id='test-" . $arr['id'] . "'>" . $arr['test2'] . "</a>";
 echo "</div></td></tr>";
}
echo "</tbody></table>";

jQuery

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

$(document).ready(function() {
    $('#paginatedTable').dataTable();
} );
javascriptphpjqueryhtmldatatables
22
Andrew

Vous devez lier le gestionnaire à un élément statique et non aux lignes pouvant être ajoutées de manière dynamique. Donc ça devrait être:

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

J'ai suivi la réponse de @Barmar.

parallèlement, j’ai intégré le clic dans la fonction document.ready, puis cela a fonctionné pour moi.

$(document).ready(function() {

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

}
} );
4
Raghu

Une autre solution simple que je viens de trouver est d’ajouter une fonction qui utilise un gestionnaire de composants pour mettre à niveau le DOM sur toute redessin de DataTables.

Peut être utilisé comme: 

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

Cela a résolu mes problèmes de pagination lorsque j'utilisais un menu déroulant dans l'une des colonnes.

2
David Hagan