2010-02-11 105 views
15

我有一个表单击事件绑定到其行(<tr>)。这些行内有<a>个元素,并分配了自己的点击事件。Jquery单击事件传播

问题是,当我点击<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!"); }); 

每当你点击它从它的父行触发事件的锚。有任何想法吗?

回答

26

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

e.stopPropagation(); 

处于锚标记的onclick事件中。

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

编辑

看到这个职位

jquery Event.stopPropagation() seems not to work

+0

没有那么不完美。我已经试过了。没有任何反应。 – ozsenegal 2010-02-11 12:27:24

+0

你能发布你的HTML标记吗? – rahul 2010-02-11 12:29:41

+0

我有一个普通的table.Then我promagamatically创建新的锚点元素,并追加到该行。 – ozsenegal 2010-02-11 12:33:28

3

我会用bind,而不是live两个<tr><a>和下面的代码

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

<a>

全部<a href>的按预期工作,<tr>事件处理程序代码在点击<a>后不会执行。

适用于所有现代浏览器。