8

を使用して、要素の外側でクリック イベントをキャプチャする実験を行っていますstopPropagation()。

$(".container").children().on('click',function(e){
  e.stopPropagation();    
});
$(".container").on("click",function(){
  alert("outside the box?");    
})​

これが機能することを示すために設定された jsFiddle を次に示します。白いボックスの外側をクリックすると、アラートが発生するはずです。

今、動的に作成された要素に同じ原則を適用しようとしています。私が理解している限りon()、jQuery でのイベント割り当ての方法は、スクリプトを変更せずにこれを機能させる必要があります。

これは、最初にリンクをクリックして要素を作成する必要がある 2 番目の jsFiddleです。これを実行すると、理論的には同じスクリプトが機能しますが、機能しません。この方法について何が欠けていますか？

4

5 に答える 5

7

アイテムが動的に追加されるときは、確実にそこにある最も近い親にハンドラーをアタッチする必要があります-あなたの場合、これはbodyです。この方法を使用して、以前は以下を提供してon()いた機能を実現できます。delegate()

$(親のセレクター).on(イベント,動的な子のセレクター,ハンドラー);

したがって、書き直されたコードは次のようになります。

$("body").on('click', '.container', function(e){
    var $target = $(e.target);
    if ($target.hasClass('container')) {
        alert("outside the box!");
    }
});

以前e.targetは、実際にイベントをトリガーした要素を見つけていました。この場合、containerクラスがあるかどうかをチェックしてアイテムを識別します。

jsFiddle デモ

于 2012-08-23T09:22:44.710 に答える
5

つまりon()、既存の親要素を機能させるには、次のように配置する必要があります。

$('body').on('click', 'a', function(e){
    e.preventDefault();
    $('<div class="container"><div class="box"></div></div>').appendTo('body');
    $(this).remove();
});

$('body').on('click', '.container > *', function(e){
  e.stopPropagation();    
});

$('body').on('click', '.container', function(){
  alert("outside the box?");    
})​

コード: http://jsfiddle.net/GsLtN/5/

詳細については、公式サイトの「直接および委任されたイベント」セクションの「.on()」を確認してください。

于 2012-08-23T09:23:42.527 に答える
2

.on()を親にバインドする必要があります。

あなたがやろうとしているのは、イベントをリッスンする親にハンドラーをバインドし、そのセレクターに一致する要素によってイベントがトリガーされたかどうかを確認することです。

$("body").on("click", '.container',function(){
  alert("outside the box?");    
})​

ここでフィドルを更新しました

于 2012-08-23T09:22:22.980 に答える
2

デモ。

イベント ハンドラーを要素 use.onにバインドする場合、バインド先のターゲットはドキュメントに存在する必要があります。

$('body').on('click', '.container > *', function(e){
  e.stopPropagation();    
});
$('body').on("click",'.container',function(){
  alert("outside the box?");    
})​
于 2012-08-23T09:23:43.853 に答える
1

のドキュメントによるとjQuery.on()：

イベントハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードがを呼び出すときにページに存在している必要があります.on()。

イベントを親コンテナにバインドする必要があります。おそらくこれのようなもの。

于 2012-08-23T09:24:33.990 に答える