JQuery Listener excluant l'enfant

Question

J'ai une liste dl d'éléments dd. Chaque élément dd a un écouteur attaché (voir ci-dessous), donc si on clique dessus je peux reconstruire la page et changer quelques trucs. Chacun de ces éléments dd a également une case à cocher à l'intérieur de ceux-ci bien que je voudrais être exclu de cet auditeur (de sorte qu'il peut être repris par un autre auditeur). Le problème qui se produit est que chaque fois que je clique n'importe où dans le dd, j'applique l'écouteur dd, pas l'écouteur checkbox même si j'ai cliqué sur la case à cocher. Existe-t-il un moyen de distinguer exactement ce qui a été cliqué sans configurer les divs à l'intérieur du dd et en appliquant les écouteurs individuellement?

Exemple Code HTML:

<dl> 
    <dd class="class1 class2 class3">Some text and stuff 
    <input type="checkbox" class="class1 checkBox"> 
    </dd> 
</dl> 

Exemple jQuery code:

$("class1.checkbox").live("click", function() { 
    //Do some other, completely different, cool stuff 
    //console.log($(this).parent().attr("id")); 
    console.log("test"); 
}); 

$("dd.class1.class2").live("click", function() { 
    //Do some cool stuff 
}); 

Answer 1

$(":checkbox").live("click", function(e) { 
     e.stopPropagation(); 
    //Do some other, completely different, cool stuff 
    //console.log($(this).parent().attr("id")); 
    alert("test"); 
}); 

$("dd.class1.class2").live("click", function (e) { 
    e.stopPropagation(); 
    //Do some cool stuff 
    alert("test2"); 
}); 

http://jsfiddle.net/PsaHQ/4/

Answer 2

Vous devez arrêter le bouillonnement de l'événement.

$(".class1:checkbox").click(function(e) { 
    alert('clicked checkbox'); 
    e.stopPropagation(); 
}); 

$("dd.class1.class2").click(function() { 
    alert('clicked dd'); 
}); 

http://api.jquery.com/event.stopPropagation/

Le concept de « bouillonnement » est comme si vous avez un élément enfant avec un événement de clic et vous ne voulez pas déclencher l'événement de clic du parent. Vous pouvez utiliser event.stopPropagation(). En gros, il suffit d'appliquer cet événement de clic à CE NŒUD D'ENFANT et de ne rien dire aux parents parce que je ne veux pas qu'ils réagissent.

événement Capturing:

   | | 
---------------| |----------------- 
| element1  | |    | 
| -----------| |-----------  | 
| |element2 \/  |  | 
| -------------------------  | 
|  Event CAPTURING   | 
----------------------------------- 

Event Bubbling:

   /\ 
---------------| |----------------- 
| element1  | |    | 
| -----------| |-----------  | 
| |element2 | |   |  | 
| -------------------------  | 
|  Event BUBBLING   | 
----------------------------------- 

Si vous utilisez live() ou delegate() vous devez return false;, mais il ne fonctionne pas. Lisez la citation ci-dessous.

par JQuery docs:

Puisque la méthode gère .live() des événements une fois qu'ils ont propagé à le haut du document, il est impossible d'arrêter la propagation de événements en direct. De même, les événements gérés par .delegate() propageront aux éléments auxquels ils sont délégués; les gestionnaires d'événements liés à tous les éléments inférieurs dans l'arborescence DOM auront déjà été exécutés au moment où le gestionnaire d'événements délégué est appelé. Par conséquent, ces gestionnaires, , peuvent empêcher le gestionnaire délégué de se déclencher par en appelant event.stopPropagation() ou en renvoyant false.

Une bonne ressource: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

Answer 3

Ok, vous avez un tas de petits problèmes en ajoutant jusqu'à un gros ici.

Votre premier sélecteur a 2 numéros. Regardez le sélecteur mis à jour ci-dessous (et notez la majuscule):

$(".class1.checkBox").live("click", function() { 
    //Do some other, completely different, cool stuff 
    console.log("test"); 
    return false; //added. 
}); 

Si vous voulez arrêter l'événement de bulles à l'auditeur suivant jquery, juste return false.

Answer 4

Il suffit de lier l'événement de clic au dd et vérifier le délégué cible appropriée

$("dd.class1.class2").live("click", function (event) { 
     if($(event.target).is(":checkbox")) 
     { 
      console.log("put checkbox func here"); 
     }else{ 
      console.log("put div func here"); 
     } 
    }); 

de travail Exemple: http://jsfiddle.net/QWLpd/1/