17

私は単純なテーブルを持っています:

ここに画像の説明を入力

TRには <tr onclick='alert("row");'>

ボタンには次のものがあります。

$("body").on('click',".b",function (e){
  alert('button');
  e.stopPropagation();
});

e.stopPropagation();ただし、「行、ボタン」というアラートを書きましたが。

これで、イベント ハンドラーが にアタッチされ、セレクターがそれに対してチェックされることがわかりましたbody(クリックはボタンで開始し、body まで移動し$.liveますdocument。

ただし、チェックはbuttonクリックではなくクリックに対して行う必要がありTRます。

をクリックしている間、それは に伝播し"body"(イベントハンドラーをアタッチしたため) 、本体に到達するまでの間に のクリックがアクティブになるようTRです。

ここで何が起こっているのですか？コードを保持し（本文に添付）、「ボタン」のアラートのみを表示するにはどうすればよいですか。

Ps

私は簡単にできることを知っています：

$(".b").on('click',function (e){
  alert('button');
  e.stopPropagation();

});

しかし、現在の (!) コードが機能しない理由を知りたいです。

4

5 に答える 5

17

問題は、イベント ハンドラが要素bodyに委譲されている場合でも、イベント ハンドラを にアタッチしていることです。.bこのイベント ハンドラーは、trイベント ハンドラーが呼び出された後にのみ呼び出されるため、伝播を停止するには遅すぎます。

動的に追加された要素を処理する必要があり、イベント ハンドラーを に単純にバインドできないと思われるので、次のtdことをお勧めします。

$('body').on('click',"tr",function (e){
  alert('row');
});
$("body").on('click',".b",function (e){
  alert('button');
  e.stopPropagation();
});

デモンストレーション

于 2013-06-10T10:39:12.667 に答える
9

...しかし、現在の (!) コードが機能しない理由を知りたいです。

jQuery docs からevent.stopPropagation、イベントの委譲について:

.live() メソッドは、ドキュメントの先頭に伝播したイベントを処理するため、ライブ イベントの伝播を停止することはできません。同様に、.delegate() によって処理されるイベントは、委任先の要素に伝達されます。DOM ツリー内のその下の要素にバインド されたイベント ハンドラーは、委任されたイベント ハンドラーが呼び出されるまでに既に実行されています。したがって、これらのハンドラーは、event.stopPropagation() を呼び出すか、false を返すことによって、委任されたハンドラーがトリガーされるのを防ぐことができます。

liveそしてdelegate今on、これが当てはまります。

于 2013-06-10T10:35:27.620 に答える