3

click()div 内のリンクをクリックすると、jq をブロックしようとします。

HTML

<div id="all">
    <div id="test">
        <a href="http://google.de">google</a>
    </div>
</div>

JS

$('#test').click(function() { alert('only when i click the div');  });

$('a').click(function(e) {
    e.stopPropagation();
    e.preventDefault();
    $('body').append(e.target.href);
});

このコードはうまく機能しますが、私のコンテンツは動的であるため、delegate()解決策が必要です。

以下のコードは機能しません。しかし、なぜ？どうしたの？

$('#all').delegate("a", "click", function(e)
{
    e.stopPropagation();
    e.preventDefault();
    $('body').append(e.target.href);
});

例
http://jsfiddle.net/Lf3hL/13/

4

5 に答える 5

5

stopPropagationはデリゲートでは機能しません-http ://api.jquery.com/event.stopPropagation/

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

これで、テストクリックを変更してデリゲートを使用し、stopImmediatePropagationを使用すると機能します

$('#all').delegate('#test', 'click' ,function() {
    alert('only when i click on the div');
});    

$('#all').delegate("a", "click", function(e)
{
    e.stopImmediatePropagation();
    e.preventDefault();
    $('body').append(e.target.href);
});

http://jsfiddle.net/Lf3hL/14/

于 2011-10-13T08:41:11.197 に答える
2

delegate()イベントをバブルアップさせてから、先祖要素でそれらを処理することで機能するため(#all例では)。

したがって、イベントはすでにバブルアップしているため、ソースでの伝播を止めることはできません (イベントは伝播して機能する必要があるため)。

于 2011-10-13T08:40:12.557 に答える
1

jQuery.delegate()ドキュメントから：

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

考えられる解決策の1つは、イベントハンドラーをにアタッチするのではなく、にアタッチしてa、#testをチェックすることevent.targetです。

このメソッドでフィドルを更新しました。

   $('#test').click(function(e) {
        if ($(e.target).is('a')) {
            alert('link was clicked');
        }
        else {
            alert('only when i click on the div');
        }

        e.preventDefault(); //just to cancel the link's default action
    });
于 2011-10-13T08:40:46.733 に答える
0

ライブ関数とデリゲート関数は、 e.stopPropagation();「通常の」イベントと同じ方法で呼び出しを処理することはできません。デリゲートドキュメントから-

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

于 2011-10-13T08:42:22.633 に答える
-1

使ってみませんか

.live()

働き？

 $('a').live('click', function() {
     // Live handler called.
 });

これにより、本体が完全にロードされた後に追加されるすべてのタグにクリック機能が追加されます。

于 2011-10-13T08:42:19.643 に答える