0

にバインドされていたいくつかのイベント ハンドラーのバインドを解除しようとしていますが.on()、何も機能していないようです。

HTML:

<div class='parent'>
    <a id='test-1' class='test'>Test 1</a>
    <a id='test-2' class='test'>Test 2</a>  
    <a id='test-3' class='test'>Test 3</a>
</div>
<hr>
<a class='unbind'>Unbind Test 1</a>

JS:

$('.parent').on('click', 'a.test', function(e){
    alert('click');
});

$('a.unbind').click(function(e){
    $('a#test-1').unbind('click');
    $('a#test-1').off('click');
});

フィドル: http://jsfiddle.net/g9ucd/5/

明確化:例ごとに、ですべてのバインディングを元に戻すだけでなく、以前に でバインドされていた特定の要素のバインドを解除できるかどうかを知りたいです。.on().off()

4

5 に答える 5

2

メソッド ドキュメントのjQuery APIは、イベントが実際には呼び出された要素に配置され、適用するフィルター セレクターを使用して、イベントが有効な要素を決定すると述べています。したがって、短い答えは NO です。フィルター セレクターによって指定された要素からイベントをアンバインドすることはできません。

ただし、セレクターをさらに制約することで、これを回避することを検討しましたか?

テスト クラスを a 要素から削除すると、そのシナリオでは、フィルター セレクターの基準を満たさなくなり、イベントに結び付けられなくなります。

ちょっとした考え。

ここに私のフィドルがあり、以下は私が変更した抜粋です。

$('a.unbind').click(function(e){
    $('a#test-1').removeClass('test');
});
于 2013-09-03T02:30:50.153 に答える
2

これを試すことができます

$('a.test').on('click', function(e){
    alert('click');
});

$('a.unbind').click(function(e){
    $('a#test-1').unbind('click');
    $('a#test-1').off('click');
});
于 2013-09-03T02:20:15.310 に答える
2

これはどう：

var clickie = function(e){
    alert('click');
}

$('.parent').on('click', 'a.test', clickie);

$('a.unbind').click(function(e){
    $('.parent').off('click', 'a.test', clickie);
});

つまり、ハンドラを on に設定することはありませんa#test-1- on に設定し.parentます。設定していないものは削除できません。からハンドラーを削除する必要がある場合a#test-1は、ライブ機能を使用しないで$('.parent a.test').on('click', clickie)ください。 は関数を要素自体にバインドするため、off個別に削除できます。

于 2013-09-03T02:13:58.280 に答える
1

@ermaganaと@Tadeck の回答のバリエーション:notは、最初の委任されたバインディングでセレクターを使用することです。そうすれば、特定の要素を追加のクラスで明示的に無効にすることで、特定の要素を「バインド解除」できます。

(この場合、クラスを使用します。これにより、 Bootstrap.disableなどを使用している場合に視覚的に無効にするという利点が得られます。)

$('.parent').on('click', 'a.test:not(.disabled)', function(e){
    alert('click');
});

$('a.unbind').click(function(e){
    $('a#test-1').addClass('disabled');
});
于 2013-09-03T13:30:41.583 に答える
1

さらにロジックを追加する必要があります。

$('.parent').on('click', 'a.test', function(e){
    // retrieve switch value:
    var disable_calls = $(this).data('disable-calls') || false;
    if (!disable_calls){
        // your logic here...
        alert('click!');
    };
});

$('a.unbind').click(function(e){
    // disable call by turning the switch:
    $('a#test-1').data('disable-calls', true);
});

イベント ハンドラーは外側の要素 ( .parent) にアタッチされ、jQuery は実際にチェックするためのショートカットを提供しますevent.target(呼び出し内でセレクターを提供することでそれを行い.on()ます)。そのロジックを変更するには、独自の特別な処理を追加する必要があります。セレクターが一致しなくなったことを確認します。

$('.parent').on('click', 'a.test.calls-enabled', function(e){
    alert('click!');
});

$('a.unbind').click(function(e){
    // disable call by turning the switch:
    $('a#test-1').removeClass('calls-enabled');
});
于 2013-09-03T02:31:30.607 に答える