我有一个表,其中点击事件绑定到其行(<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!"); });
每当您单击锚点时,它都会从其父行触发事件。有什么想法吗?
答案 0 :(得分:26)
你必须停止事件冒泡。在jQuery中,您可以通过
执行此操作e.stopPropagation();
在锚标记的onclick事件中。
$("a").live("click",function(e){alert("clicked!");e.stopPropagation();});
<强> 修改 强>
看这篇文章
答案 1 :(得分:3)
对于bind
和live
,我会使用<tr>
代替<a>
以及以下代码
$("a").bind("click", function(e){ alert("clicked!"); e.stopPropagation() });
代表<a>
。
所有<a href>
将按预期工作,点击<tr>
后<a>
事件处理程序代码将无法执行。
适用于所有现代浏览器。