Sélecteurs jquery nesteds déclenchant des événements spécifiques aux parents et aux enfants

J’ai une table avec la structure suivante

table # Main

tbody

Tr.Row

td

input.EditRow

Mon jquery ressemble à ceci:

$("table#Main > tbody > tr.Row").live("click", function (e) { RowClick($(this)); }); $(".EditRow").live("click", function (e) { EditRow($(this)); });

Mon problème est que si je clique sur le bouton .EditRow et appelle la fonction EditRow, la fonction RowClick est appelée immédiatement après.

Après avoir fait des recherches sur le site, j’ai constaté que d’autres personnes contournaient ce problème en utilisant l’une ou l’autre des commandes suivantes.

 e.preventDefault(); e.stopPropagation();

Je les ai essayées sur les deux fonctions, dans différentes combinaisons, mais je ne pouvais pas le comprendre. Est-ce que quelqu’un peut me dire ce que je fais mal?

Je vous remercie! <3

Mise à jour: Comme @pasortingck le démontre dans son commentaire, event.stopPropagation() devrait fonctionner à partir de jQuery 1.4.3 .

Pour jQuery 1.4.2 et inférieur:

Le problème est que les deux gestionnaires d’événements sont liés à la racine de l’arborescence DOM, en raison de .live() :

Le gestionnaire passé à .live() n’est jamais lié à un élément; Au lieu de cela, .live() lie un gestionnaire spécial à la racine de l’arbre DOM.

Donc event.stopPropagation n’a plus d’effet (les deux gestionnaires d’événements ont le même niveau):

Étant donné que la méthode .live() gère les événements une fois qu’ils se sont propagés en haut du document, il n’est pas possible d’arrêter la propagation d’événements en direct.

Utilisez event.stopImmediatePropagation place et inversez l’ordre de liaison des gestionnaires d’événement (sinon, cela ne fonctionnera pas car les gestionnaires d’événement sont appelés dans l’ordre dans event.stopImmediatePropagation ils sont liés):

 $(".EditRow").live("click", function (e) { e.stopImmediatePropagation(); EditRow($(this)); }); $("table#Main > tbody > tr.Row").live("click", function (e) { RowClick($(this)); });

 $(".EditRow").live("click", function (e) { e.stopPropagation(); EditRow($(this)); });

Devrait fonctionner très bien.