2

こんなはずなのかわからないし、根本的に間違ったことをしている。

div特定のクラスを持つがあり、divそれをクリックすると応答が返されますが、別divのクラスをクリックすると、最初のクラスからクラスが削除されdivます。

divただし、クラスを削除した後、最初のクラスをクリックし続けると、応答が返されます。

クラスを削除した後もクリックが反応し続けるのはなぜですか？

HTML

<div class="testing">Testing</div>

<div id="testing_remover">Remove class from testing</div>

JS：

$(document).ready(function(){
    $('.testing').click(function(){
        console.log('testing is active');
    });

    $('#testing_remover').click(function(){
        $('.testing').removeClass('testing');
    });
});

フィドル： http： //jsfiddle.net/P3NpK/

4

2 に答える 2

6

イベントハンドラーは、セレクターではなく要素にバインドされます。

ハンドラーを削除するには、次を使用します.off()。

$(".testing").off("click");

1.7より前のバージョンのjQueryは、できれば.unbindの代わりに使用する必要があり.offます。

于 2012-11-19T14:22:55.500 に答える
2

イベントハンドラーをDOMツリーの上位に委任するか、イベントハンドラーのバインドを明示的に解除する必要があります。イベントが要素にバインドされたら、クラス名を変更するだけではイベントハンドラーは削除されません。

イベントハンドラーを削除するには（更新されたフィドル）：

$('#testing_remover').click(function(){
    $('.testing').off('click');
});

イベントハンドラーを委任するには（更新されたフィドル）：

$(document).on("click", ".testing", function(){
    console.log('testing is active');
});

委任アプローチが機能する理由は、選択した要素（この場合は）にバブルされると、jQueryがイベントをキャプチャするためdocumentです。イベントターゲットがセレクターと一致するかどうかを確認し、一致する場合はイベントハンドラーを実行します。クラスを削除すると、ターゲットはセレクターと一致しなくなります。

于 2012-11-19T14:23:11.783 に答える