Jquery单击事件传播

时间:2010-02-11 12:22:26

标签: jquery events click

我有一个表,其中点击事件绑定到其行(<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!"); });

每当您单击锚点时,它都会从其父行触发事件。有什么想法吗?

2 个答案:

答案 0 :(得分:26)

你必须停止事件冒泡。在jQuery中,您可以通过

执行此操作
e.stopPropagation();

在锚标记的onclick事件中。

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

<强> 修改

看这篇文章

<强> jquery Event.stopPropagation() seems not to work

答案 1 :(得分:3)

对于bindlive,我会使用<tr>代替<a>以及以下代码

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

代表<a>

所有<a href>将按预期工作,点击<tr><a>事件处理程序代码将无法执行。

适用于所有现代浏览器。