title: Jquery click event propagation
body: <p>I have a table with click events bound to its rows (<code>&lt;tr&gt;</code>). There are <code>&lt;a&gt;</code> elements inside those rows with their own click events assigned.</p>
  
  <p>Problem is, when i click on the <code>&lt;a&gt;</code>  element, it also fires the click event from the parent <code>&lt;tr&gt;</code>. I don't want this behavior; I just want to fire the <code>&lt;a&gt;</code> click event.</p>
  
  <p>Code:</p>
  
  <pre><code> // Event row TR
  
   $("tr:not(:first)").click(function() {
      $(".window, .backFundo, .close").remove();
  
      var position = $(this).offset().top;
      position = position &lt; 0 ? 20 : position;
  
      $("body").append( $("&lt;div&gt;&lt;/div&gt;").addClass("backFundo") );
      $("body").append( $("&lt;div&gt;&lt;/div&gt;").addClass("window")
           .html("&lt;span class=close&gt;&lt;img src=Images/close.png id=fechar /&gt;&lt;/span&gt;")
        .append( "&lt;span class=titulo&gt;O que deseja fazer?&lt;/span&gt;"
                +"&lt;span class=crud&gt;&lt;a href=# id=edit&gt;Editar&lt;/a&gt;&lt;/span&gt;"
                +"&lt;span class=crud&gt;&lt;a href=# id=delete codigo=" 
                + $(this).children("td:first").html() 
                + "&gt;Excluir&lt;/a&gt;&lt;/span&gt;" )
         .css({top:"20px"})
         .fadeIn("slow") );
  
      $(document).scrollTop(0);
   });
  
   // &lt;A&gt; Element event
  
   $("a").live("click",function() { alert("clicked!"); });
  </code></pre>
  
  <p>Whenever you click the anchor it fires event from it parent row. Any ideas?</p>