IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Onclick sur tr et lien dans td


Sujet :

jQuery

  1. #1
    Modérateur
    Avatar de toopac
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Juin 2009
    Messages
    940
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2009
    Messages : 940
    Points : 2 913
    Points
    2 913
    Par défaut Onclick sur tr et lien dans td
    Bonjour,

    J'ai un tableau avec 2 types de lignes : des lignes "parent" et de lignes "enfant".
    Quand je clique sur une ligne "parent", ses lignes "enfant" disparaissent si elles étaient affichées ou s'affichent si elles étaient cachées.

    Ceci fonctionne correctement.

    Cependant mes lignes "parent" contiennent aussi des liens.
    Or quand je clique sur un lien, la page cible ne s'ouvre pas, c'est l'action du onclick de la ligne qui semble être "prioritaire".

    Avez vous une idée pour résoudre de problème, à savoir garder le lien fonctionnel ?


    Voici le code illustrant mon problème si je n'ai pas été clair :
    tableau :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <table>
    	<tr id="parent1" class="parent">
    		<td>texte</td>
    		<td><a href="page1.html" >lien</a></td>
    	</tr>
    	<tr id="enfant11" class="enfant">
    		<td>texte</td>
    	</tr>
    	<tr id="enfant12" class="enfant">
    		<td>texte</td>
    	</tr>
    	<tr id="parent2" class="parent">
    		<td>texte</td>
    		<td><a href="page2.html" >lien</a></td>
    	</tr>
    	<tr id="enfant21" class="enfant">
    		<td>texte</td>
    	</tr>
    	<tr id="enfant22" class="enfant">
    		<td>texte</td>
    	</tr>
    </table>
    script :
    Code jquerry : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $('tr.parent').click(function () {
    	// code pour chacher les tr fils
    });

    Merci d'avance pour votre aide.

  2. #2
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    Salut,

    Il faut jouer avec un event.stopPropagation(); pour arrêter la propagation de l'événement dans le DOM.

  3. #3
    Modérateur
    Avatar de toopac
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Juin 2009
    Messages
    940
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2009
    Messages : 940
    Points : 2 913
    Points
    2 913
    Par défaut
    Super, merci pour la piste !

    Voici donc, pour info, le bout de code correspondant à ce qui a été posté avant, et qui résout le problème
    Code jQuery : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $('tr.parent td a').click(function (evt) {
            evt.stopPropagation();
    });

    Merci encore !

  4. #4
    Candidat au Club
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Août 2012
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Août 2012
    Messages : 3
    Points : 4
    Points
    4
    Par défaut
    Je n'ai pas ce problème, la propagation du clique est conservée par défaut normalement. Dans un test que j'ai fait, le code du "onClick" est executé, puis le lien vers la page fonctionne.
    Cela vient peut être de ton code qui ouvre et ferme les enfants.

    Quel est l’intérêt de cacher/afficher les enfants avant d'aller à une autre page ?

    Est ce que tu peux envoyer ce code ?


    JL.

  5. #5
    Candidat au Club
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Août 2012
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Août 2012
    Messages : 3
    Points : 4
    Points
    4
    Par défaut
    Aaaahhhh mais tu souhaitais en fait que lorsqu'on click sur le lien, le code du tr:onclick ne soit pas appelé c'est ça ?

    JL.

  6. #6
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut
    Inutile de rajouter un événement...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    $('tr.parent').click(function (e) {
    	if($(e.target).is('a')){
    		return;
    	}
    	// code pour chacher les tr fils
    });
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  7. #7
    Modérateur
    Avatar de toopac
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Juin 2009
    Messages
    940
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2009
    Messages : 940
    Points : 2 913
    Points
    2 913
    Par défaut
    Effectivement, comme ça ça marche aussi.
    Du coup j'ai modifié pour utiliser de code de Bovino.

    Merci à tous.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Suppression des liens dans 38 cellules sur 36 colonnes
    Par La Zélie dans le forum Macros et VBA Excel
    Réponses: 9
    Dernier message: 25/05/2008, 02h20
  2. [POO] Faire afficher un objet dés Onclick sur un lien
    Par bilou95 dans le forum Général JavaScript
    Réponses: 9
    Dernier message: 10/10/2007, 09h56
  3. Réponses: 1
    Dernier message: 16/08/2007, 18h58
  4. Catch un click sur un lien dans un ie
    Par krakoss dans le forum Windows
    Réponses: 1
    Dernier message: 06/07/2007, 16h38
  5. Est il possible d'assigner 2 'onclick' sur lien image ?
    Par bilou95 dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 03/04/2007, 10h53

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo