jQuery Girl
  1. jQuery Girl
  3. Problème de survol de jQuery DataTables
Intereting Posts
Déployer avec Bower Erreur HTTP 405.0 – Méthode non autorisée à l’aide de Jquery ajax get Summernote – Supprimer une image du serveur Comment envelopper chaque mot d’un élément dans une balise span? Comment assigner une valeur de variable à jquery? trouve la largeur de l’image enfant et l’applique au parent div j jquery Affichage vertical complet de la semaine du calendrier Faire des colonnes de la même hauteur dans le bootstrap Passer $ (this) dans setTimeout Ajouter du CSS ou du style à chaque nœud dans swimlane (bibliothèque GOjs) Quel framework web Java choisir pour jQuery? obtenir le texte actuel Comment faire des calculs avec des variables dans jQuery? Mettez en surbrillance le lien actif lorsque vous utilisez scrollto sur la vue actuelle Validation jQuery avant soumission AJAX

Problème de survol de jQuery DataTables

J’ai cette page. Lorsque je modifie le nombre d’entrées, le survol des entrées récemment visibles échoue. 

        .edit {display: none}   $(document).ready(function() { $('#example').dataTable(); } );   jQuery(document).ready(function() { jQuery('#example tr').mouseover(function() { jQuery(this).find('span:first').show(); }).mouseout(function() { jQuery(this).find('span:first').hide(); }); });    
  
 A B C   
   
 a1 b1 c1   EDIT   
 
 a2 b2 c2   EDIT   
 
 a3 b3 c3   EDIT   
 
 a4 b4 c4   EDIT   
 
 a5 b5 c5   EDIT   
 
 a6 b6 c6   EDIT   
 
 a7 b7 c7   EDIT   
 
 a8 b8 c8   EDIT   
 
 a9 b9 c9   EDIT   
 
 a10 b10 c10   EDIT   
 
 a11 b11 c11   EDIT   
 
 a12 b12 c12   EDIT   
 
 a13 b13 c13   EDIT   
 
 a14 b14 c14   EDIT

Vous avez besoin d’une délégation d’événement. Au lieu d’attacher des écouteurs distincts à chacune des lignes actuellement dans la table, vous attachez un seul au conteneur (#table) et transmettez un sélecteur (tr) pour faire correspondre les cibles d’événement (puisque les événements remontent de l’intérieur de la table à moins d’être arrêtés avec stopPropagation() ).

Avec jQuery 1.7+, vous pouvez utiliser la fonction $(container).on(event, selectorSsortingng, func) qui est égale à $(container).delegate(event, selectorSsortingng, func) dans jQuery <1.7.

Appeler on() sans l’argument du milieu, comme $(my_rows).on(event, func) , serait l’équivalent 1.7 de $(my_rows).bind('mouseover', func) qui ne s’applique qu’aux éléments actuellement dans le DOM. . 

 jQuery(document).ready(function() { jQuery('#example'). on('mouseover', 'tr', function() { jQuery(this).find('span:first').show(); }). on('mouseout', 'tr', function() { jQuery(this).find('span:first').hide(); }); });

Essayez de déplacer votre fonction pour la souris dans les parameters du .dataTable()

Je viens de le tester et cela a fonctionné pour moi.

Lors de l’ajout dynamic de nouveaux éléments comportant déjà des fonctions / événements / actions déjà liés, les nouveaux éléments ne seront pas automatiquement inhérents aux événements / actions de leurs frères et sœurs. Je recommande d’utiliser jQuery pour quelque chose comme ça.

Pour les versions de jQuery supérieures à 1.3, utilisez la fonction jQuery BIND (): http://api.jquery.com/bind/

Description: cela va mapper les données transmises à vos nouveaux gestionnaires d’événements nécessaires

Pour les versions 1.7 ou supérieures de jQuery, utilisez la fonction ON () de jquery:

http://api.jquery.com/on/

Pour votre code, si Jquery 1.7 essayez: 

 jQuery("#example tr").on({ mouseenter: function(){ jQuery(this).find('span:first').show(); }, mouseleave: function(){ jQuery(this).find('span:first').hide(); } });