web-dev-qa-db-ja.com

Jqueryクリックイベントの伝播

行にバインドされたクリックイベントを含むテーブルがあります（<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!"); });

アンカーをクリックするたびに、親行からイベントが発生します。何か案は？

jqueryeventsclick
15
ozsenegal

イベントのバブリングを停止する必要があります。 jQueryではこれを行うことができます

e.stopPropagation();

アンカータグのonclickイベントで。

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

編集

この投稿を見る

jquery Event.stopPropagation（）が機能していないようです

26
rahul

_<tr>_と_<a>_の両方と次のコードにbindの代わりにliveを使用します

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

_<a>_の場合。

すべての_<a href>_は期待どおりに機能し、_<tr>_をクリックした後は_<a>_イベントハンドラコードは実行されません。

最新のすべてのブラウザで動作します。

3
Antony Hatchkins