行にバインドされたクリックイベントを含むテーブルがあります(<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!"); });
アンカーをクリックするたびに、親行からイベントが発生します。何か案は?
イベントのバブリングを停止する必要があります。 jQueryではこれを行うことができます
e.stopPropagation();
アンカータグのonclickイベントで。
$("a").live("click",function(e){alert("clicked!");e.stopPropagation();});
編集
この投稿を見る
_<tr>
_と_<a>
_の両方と次のコードにbind
の代わりにlive
を使用します
$("a").bind("click", function(e){ alert("clicked!"); e.stopPropagation() });
_<a>
_の場合。
すべての_<a href>
_は期待どおりに機能し、_<tr>
_をクリックした後は_<a>
_イベントハンドラコードは実行されません。
最新のすべてのブラウザで動作します。