Jquery点击事件传播 [英] Jquery click event propagation

问题描述

我有一个表格，其中点击事件绑定到其行（< tr> ）。在这些行中有< a> 个元素分配了自己的点击事件。

问题是，点击< a> 元素，它也会从父< tr> 触发点击事件。我不想这种行为;我只想点击< a> 点击事件。

代码：

  //事件行TR 
 
 $（tr：not（：first） b $ b $（。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>元素事件
 
 $（a）。live（click，function（）{alert（clicked！ 
  

每当您单击锚点时，都会从其父行中触发事件。任何想法？

解决方案

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

执行此操作：

  e.stopPropagation 
 
  

  $（a）。live（click，function（e）{alert（clicked！）; e.stopPropagation（）;}）; 
  

$ b

查看此帖子

jquery Event.stopPropagation（）似乎无效

I have a table with click events bound to its rows (<tr>). There are <a> elements inside those rows with their own click events assigned.

Problem is, when i click on the <a> element, it also fires the click event from the parent <tr>. I don't want this behavior; I just want to fire the <a> click event.

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

Whenever you click the anchor it fires event from it parent row. Any ideas?

解决方案

You have to stop event bubbling. In jQuery you can do this by

e.stopPropagation();

in the onclick event of the anchor tag.

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

Edit

See this post

jquery Event.stopPropagation() seems not to work

这篇关于Jquery点击事件传播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！