JQuery stopPropagation sur .live () lorsque les gestionnaires existent déjà et sont liés

Je suis conscient que les appels en direct jaillissent à travers le document et c’est pourquoi j’ai des problèmes.

Malheureusement, j’utilise des bibliothèques tierces qui lient des éléments et j’aimerais créer un scénario dans lequel aucun événement de clic ne sera diffusé jusqu’à ces éléments.

L’utilisation de .click () en combinaison avec eventStopPropogation fonctionne très bien, mais en raison de la nature dynamic du contenu, je dois utiliser soit en direct, soit en mode délégué, etc. Je dois empêcher le clic “externe” de se déclencher lorsque je clique sur le div “interne”. Je ne peux pas changer le gestionnaire “externe”.

Merci d’avance pour votre aide!!

http://jsfiddle.net/99zQM/2/

HTML:

 outer  inner

Javascript:

 $("#outer").bind('click',function(e){ alert("outer clicked"); }); $("#inner").live('click',function(e){ alert("inner clicked"); });

utilisez on délégué lié à outer et appelez e.stopPropagation() dans inner gestionnaire de cliquetis inner .. cela devrait être le truc.

essayez cette mise à jour

 $("#outer").bind('click',function(e){ alert("outer clicked"); }); $('#outer').on('click',"#inner",function(e){ e.stopPropagation(); alert("inner clicked"); });

violon mis à jour ici

Comme vous l’avez déjà fait remarquer, la délégation d’événements repose sur la propagation d’événements et l’utilisation d’un élément statique. Le problème est compliqué car il n’y a rien entre les éléments

, mais nous pouvons contourner ce problème.

Configurez un gestionnaire d’événements dynamic pour les événements de click sur l’élément #inner lié à #outer et appelez event.stopImmediatePropagation() pour empêcher d’autres gestionnaires d’événements d’être exécutés. L’inconvénient est que cela dépend de l’ordre dans lequel les gestionnaires d’événements sont liés. Votre gestionnaire d’événements délégué pour #inner doit donc être lié avant votre gestionnaire d’événements statiques pour #outer .

 $('#outer').on('click', '#inner', function(e) { console.log('inner'); e.stopImmediatePropagation(); }).click(function(e) { console.log('outer'); });

Jetez un oeil à cette démo de jsFiddle .

U peut utiliser

 $("#outer").bind('click',function(e){ alert("outer clicked"); }); $('#outer').on('click',"#inner",function(e){ e.stopImmediatePropagation(); alert("inner clicked"); });