web-dev-qa-db-fra.com

Événement de clic jQuery sur le parent, mais recherche de l'élément enfant (cliqué)

disons que j'ai un élément parent qui a tellement d'éléments enfants imbriqués à l'intérieur de lui-même:

<div id="p">
    <div id="c1">
        <div id="c2"></div>
        <div id="c3"></div>
    </div id="c4">
        <div id="c5"></div>
    </div>
</div>

J'ai déjà lié un événement click sur le parent:

$('#p').bind('click', function() {
    alert($(this).attr('id'));
});

Étant donné que l'événement est affecté à l'élément parent, je vois toujours l'ID parent, cependant, je me demande s'il existe un moyen possible de savoir sur lequel de ces éléments enfants a été cliqué?

Je ne peux pas non plus attribuer d'événement aux éléments enfants ni supprimer l'écouteur d'événements de la division parent.

javascriptjqueryeventsdom
38
Mahdi

Vous devez passer l'objet événement à la fonction pour obtenir l'élément qui a déclenché l'événement, event.target vous donnera l'élément source.

Démo en direct

 $('#p').bind('click', function(event) {
    alert(event.target.id);
 });

ou

Démo en direct

$('#p').bind('click', function(event) {
    alert($(event.target).attr('id'));
});

Modifier

La première méthode event.target.id Est préférée à la seconde $(event.target).attr('id') pour les performances, la simplicité et la lisibilité.

57
Adil

Vous pouvez essayer le code ci-dessous. Essayez également le jsfiddle (démo).

$('#p').on('click', function(event) {
    alert(event.target.id);
});​

Essayez la démo

La réponse à votre deuxième question est que vous pouvez attribuer un événement à l'enfant et le supprimer de son parent. Regarde ça.

.stopPropagation();

Empêche l'événement de se propager dans l'arborescence DOM, empêchant les gestionnaires parents d'être notifiés de l'événement. En savoir plus

si vous souhaitez que l'événement spécifique soit exécuté uniquement et qu'aucun autre événement ne soit déclenché, utilisez le code ci-dessous

event.stopImmediatePropagation()

Empêche le reste des gestionnaires d'être exécutés et empêche l'événement de se propager dans l'arborescence DOM. En savoir plus

J'espère que cela résoudra votre problème. Si vous avez des questions, n'hésitez pas à demander. Merci

7
Techie

Si vos éléments ont des petits-enfants, il existe une meilleure façon de n'obtenir que l'enfant. Notez le signe supérieur à.

$('.parent > .child').click(function() {
    // This will be the child even if grandchild is clicked
    console.log($(this));
});
1
Eddie