13

動的に作成されたモーダル div など、特定の親ノードを指定します。一連の動的 html を追加し、それらの要素をクリック、マウスオーバーなどのイベントにバインドした後、モーダル div の子要素に関連付けられているすべてのイベントのバインドを解除する方法があります。私の特定の例では、モーダル div が非表示になると、dom から完全に削除され、必要になるたびに最初から再作成されます。

特定のバインディングをすべて追跡する必要がなく、1 つの呼び出しを使用して、バインディングを持つ子要素を取得し、それらを「オフ」にする方法を探しています。

注: dom から要素を削除してから再作成してもバインドが強制終了されないことを検証できます。これは、モーダル div を開いたり閉じたりすると、バインドされたイベントが div が作成されたのと同じ回数発生するためです。$(document).on('click', '#abc',function(e) {});要素をバインドするために使用しています。

4

4 に答える 4

22

You can use unbind() if you used bind() to attach the events.

  $('#foo').children().unbind();
  $('#foo').children('.class').unbind(); //You can give selector for limiting clildren

or

Use off() if you used on() to bind events.

 $('#foo').children().off();
 $('#foo').children('class').off();   //You can give selector for limiting clildren

For removing the event from all descendants instead of direct children you can use Descendant Selector (“ancestor descendant”) .

$('#foo *').off();
于 2012-08-17T20:43:27.640 に答える
18

うん-パラメータoff()なしで使用-バインドされたすべてのイベントのバインドを解除します。

$('#parent *').off();

文字通り子供を意味する場合、つまり子供や子孫ではない場合は、#parent > *代わりに使用してください。

于 2012-08-17T20:42:26.147 に答える
1

イベントを要素に直接バインドしたくない場合があります。むしろ、「body」などの親要素にバインドする必要があります。これは、イベント リスナーをグローバルに定義したいが、要素がまだ存在しない可能性がある場合に不可欠です。

$("body").on("mouseenter", ".hover-item", function() {
    // do the thing
}

ここでの問題は、「.hover-item」で .off() を実行しようとすると機能しないことです。または、受け入れられた回答で推奨されているように .children() を使用して、「body」で .off() を使用しようとしても、何もしません。

.off() を使用する代わりに、イベントを特定のクラス名にバインドし、それらのイベントを無効にする場合はクラス名を削除するのがベスト プラクティスだと思います。

$(".the-element").removeClass(".hover-item");

その特定の要素では、イベント リスナーが有効になりません。ただし、「body」でイベント リスナーを技術的に定義したため、後でホバー効果を再度有効にする必要がある場合は、 addClass(".hover-item") を使用するだけですべて正常に動作します。

これは、複数のアイテムに対して 1 つのアニメーションを使用する場合にのみ適用されます。ホバー イベントは、この良い例です。たとえば、異なるボタンに異なるホバー イベントを適用する代わりに、すべてのボタンに同じイベントを適用できます。ただし、特定のボタンのホバー イベントを無効にしたいだけの場合は、これが適しています。

于 2016-06-06T06:04:58.430 に答える