要素を削除する前にjqueryイベントのバインドを解除する必要がありますか？

jquery-ui-dialogを使用したページがあります。ダイアログが開くたびに、ページの内容がajaxを使用して読み込まれます。次に、jquery "on（）"を使用していくつかのイベントをバインドします。ダイアログが閉じると、そのコンテンツは空になります。要素を削除する前にjqueryイベントのバインドを解除する必要がありますか？

質問はです。$ .empty（）より前の ".ajax-content"のイベントをアンバインドする必要がありますか？

編集： 懸念1.すべての可能な劣化JSのパフォーマンス？この方法で何百ものノードを空にすれば

懸念2.も要素を削除するメモリ（またはjqueryのの何でも実行/評価チェーン）からイベントを削除しますか？

私は今は何もしていません。ページを更新せずに何度もダイアログを開いたり閉じたりした場合、問題はありますか？

<div id="jquery-dialog" class="container"> 
    <div class="ajax-content"> 
    some buttons.... 
    </div> 
</div> 

------after each ajax load------------ 
$(".ajax-content").on("click", ".button", function(event) { 
    //handles the click 
}); 

------on dialog close------------ 
$("#jquery-dialog").empty();

出典

2012-06-09 Reed

1：どのような良い質問？私はこれも心配しています。 – vietean

ねえ、私はこれが古い答えです知っているが、私は受け入れ答えは誤解を招くと考えています。

古いブラウザ（ehem IE）でメモリリークが発生するのを避けるために、未処理のJSのイベントをバインド解除する必要があると言うのは間違いありませんが、remove（）またはempty（）を呼び出すと、

だからあなたの現在の通話が十分でなければなりません）（空にするために、メモリリークを回避するために

、それは、jQueryのドキュメント（http://api.jquery.com/empty/）からアンバインド（）

によって先行されるのjQueryを必要としません。要素自体を削除する前に、子要素からデータやイベントハンドラなどの他の構造体を削除します。

出典

2013-07-17 20:07:54 Oscar

答えをありがとう。 – Reed

ありがとうございました...簡潔に、要点を述べ、ドキュメントの参照を提供しました。 +1 – greaterKing

それがなければならないが、バインド解除すると良いでしょう：

コードは次のようになります。

ほとんどのブラウザでは、これを正しく処理し、それらのハンドラ自体を削除します。

また、あなたがイベントデリゲートを使用することができ、この問題を処理するためのdo-i-need-to-remove-event-listeners

より良い方法を見ることができます。

出典

2012-10-31 07:39:33 Liber

リンクをありがとう。新しいことを学びました。 – Reed

-1

オスカーの答えが不完全である場合、.on（）を使用してイベントを添付した場合、.off（）を呼び出す必要があります。

.off（）が呼び出されない場合、標準の.click（）ハンドラを介してp1.htmlに割り当てられたイベントは、.empty（）を呼び出すときに削除されますが、p2.htmlで割り当てられたイベントは削除されます。 on（）は削除されず、パーシャルが読み込まれるたびに割り当てられます。

indexです。HTML

<html> 
<body> 
<script src="ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    <div id='spi' style="padding: 20px; border: 1px solid #666;"> 
    </div> 
    <br/> 
    <a href="p1.html" class="spi">Load Partial 1</a> | 
    <a href="p2.html" class="spi">Load Partial 2</a> 
    <script type="text/javascript"> 
    $(document).on('click', 'a.spi' , function(e) { 
     e.preventDefault(); 

     /* 
     !!! IMPORTANT !!! 
     If you do not call .off(), 
     events assigned on p2.html via .on() 
     are kept and fired one time for each time p2.html was loaded 
     */ 

     $("#spi").off(); 


     $("#spi").empty(); 
     $("#spi").load($(this).attr('href')); 
    }); 
    </script> 
</body> 
</html>

p1.html

This is the partial 1<br/> 
<br/> 
<br/> 
<a href="javascript:void(0)" id='p1_l1'>Link 1</a> 
<br/><br/> 
<a href="javascript:void(0)" id='p1_l2'>Link 2</a> 
<br/><br/> 
<a href="javascript:void(0)" id='p1_l3'>Link 3</a> 


<script type="text/javascript"> 
    $("#p1_l1").click(function(e) { 
     e.preventDefault(); 
     console.debug("P1: p1_l1"); 
    }); 
    $("#p1_l2").click(function(e) { 
     e.preventDefault(); 
     console.debug("P1: p1_l2"); 
    }); 
</script>

p2.html

This is the partial 2<br/> 
<br/> 
<br/> 
<a href="javascript:void(0)" id='p2_l1'>Link 1</a> 
<br/><br/> 
<a href="javascript:void(0)" id='p2_l2'>Link 2</a> 


<script type="text/javascript"> 
    $("#spi").on('click', 'a', function(e) { 
     e.preventDefault(); 
     console.debug('P2: ' + $(this).attr('id')); 
    }); 
</script>

出典

2014-04-10 12:34:15 maxidirienzo

p2.htmlで.on（）を呼び出すと、イベントは '#spi'にアタッチされます（内側の 'a'要素ではない）。後で.empty（）を実行すると、 'a'要素にアタッチされたイベントのバインドが解除されますが、 '#spi'のイベントは保持されます。$（ "＃spi"）。on（ $（ "＃spi a"）に（ 'click'、function）を入力すると、必要な効果が得られます。 – Oscar

要素を削除する前にjqueryイベントのバインドを解除する必要がありますか？

答えて

関連する問題