Jquery点击事件传播

Question

我有一个表格，它的行(<tr>)绑定了点击事件。这些行内有<a>元素，它们也分别绑定了自己的点击事件。

问题是，当我点击<a>元素时，它同时触发了父级<tr>的点击事件。我不想这样，我只希望触发<a>的点击事件。

代码:

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

无论何时你点击锚点，它都会从其父行触发事件。有任何想法吗？

- ozsenegal

Answer 1

你需要停止事件冒泡。在jQuery中，你可以通过以下方式实现：

e.stopPropagation();

在锚点的 onclick 事件中。

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

编辑

查看此帖子

jquery Event.stopPropagation() 似乎不起作用

- rahul

---

我有一个普通的表格。然后我通过编程方式创建新的锚元素，并将其附加到那些行上。 - ozsenegal

尝试在锚点事件处理程序的末尾加入 "return false"。 - rahul

为了保险起见，在那里添加一个 e.preventDefault();，因为在事件传播方面存在一些浏览器不一致性。 - Nick Craver

return false 和 e.preventDefault() 都会阻止默认的点击行为（跳转到链接页面）发生 - 这显然不是 OP 想要的。 - Antony Hatchkins

Answer 2

我建议使用bind来替代live，对于<tr>和<a>，以下是代码：

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

对于<a>标签，所有的<a href>都将按预期工作，而<tr>事件处理程序代码将不会在点击<a>后执行。

适用于所有现代浏览器。

- Antony Hatchkins