Jquery Click-Ereignispropagierung

Question

Ich habe eine Tabelle mit Klickereignissen, die an ihre Zeilen gebunden sind (<tr>). In diesen Zeilen befinden sich <a> Elemente mit zugewiesenen eigenen Klickereignissen.

Problem ist, wenn ich auf das Element <a> klicke, löst es auch das Klickereignis von der übergeordneten <tr>. Ich will dieses Verhalten nicht; Ich möchte nur das <a> Click-Ereignis auslösen.

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!"); }); 

Jedes Mal, wenn Sie den Anker klicken Sie Ereignis von ihm Eltemzeile abfeuert. Irgendwelche Ideen?

Answer 1

Sie müssen die Ereignisblasen stoppen. In jQuery können Sie dies durch

e.stopPropagation(); 

im onclick-Ereignis der Anker-Tag tun.

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

bearbeiten

finden Sie in diesem Beitrag

jquery Event.stopPropagation() seems not to work

Answer 2

I bind statt live für beide <tr> und <a> und den folgenden Code verwenden würde

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

für <a>.

Alle <a href> funktioniert wie erwartet und <tr> Event-Handler-Code wird nicht ausgeführt, nachdem Sie auf <a> klicken.

Funktioniert in allen modernen Browsern.