Propagation d'un événement Jquery Click

Question

J'ai une table avec des événements click liés à ses lignes (<tr>). Il y a <a> éléments à l'intérieur de ces lignes avec leurs propres événements de clic assignés.

Le problème est que lorsque je clique sur l'élément <a>, il déclenche l'événement click du parent <tr>. Je ne veux pas de ce comportement; Je veux juste déclencher l'événement click <a>.

code:

// Event row TR 

$("tr:not(:first)").click(function() { 
    $(".window, .backFundo, .close").remove(); 

    var position = $(this).offset().top; 
    position = position < 0 ? 20 : position; 

    $("body").append($("<div></div>").addClass("backFundo")); 
    $("body").append($("<div></div>").addClass("window") 
     .html("<span class=close><img src=Images/close.png id=fechar /></span>") 
     .append("<span class=titulo>O que deseja fazer?</span>" 
       +"<span class=crud><a href=# id=edit>Editar</a></span>" 
       +"<span class=crud><a href=# id=delete codigo=" 
       + $(this).children("td:first").html() 
       + ">Excluir</a></span>") 
     .css({top:"20px"}) 
     .fadeIn("slow")); 

    $(document).scrollTop(0); 
}); 

// <A> Element event 

$("a").live("click",function() { alert("clicked!"); }); 

Chaque fois que vous cliquez sur l'événement l'ancre, il tire de ce rang parent. Des idées?

Answer 1

Vous devez arrêter les bulles d'événements. En jQuery, vous pouvez le faire en

e.stopPropagation(); 

en cas onclick de la balise d'ancrage.

$("a").live("click",function(e){alert("clicked!");e.stopPropagation();}); 

Modifier

Voir ce post

jquery Event.stopPropagation() seems not to work

Answer 2

J'utiliser bind au lieu de live pour les <tr> et <a> et le code suivant

$("a").bind("click", function(e){ alert("clicked!"); e.stopPropagation() });

pour <a>.

Tous les <a href> fonctionneront comme prévu et le code du gestionnaire d'événements <tr> ne s'exécutera pas après avoir cliqué sur <a>.

Fonctionne dans tous les navigateurs modernes.