47

jquery-ui-dialog を使用したページがあります。ダイアログが開くたびに、ajax を使用してページのコンテンツが読み込まれます。次に、jquery「on()」を使用してイベントをバインドします。ダイアログが閉じると、その内容が空になります。

問題は、$.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();
4

3 に答える 3

55

ねえ、これは古い質問だと思いますが、受け入れられた答えは誤解を招くと思います。

古いブラウザー (ehem IE) でのメモリ リークを避けるために生の JS でイベントのバインドを解除する必要があると言っても過言ではありませんが、remove() または empty() を呼び出すと、既にそれが行われています。

したがって、現在の empty() への呼び出しで十分なはずです。前に unbind() を付ける必要はありません。

jQuery ドキュメントから ( http://api.jquery.com/empty/ )

メモリ リークを回避するために、jQuery は要素自体を削除する前に、子要素からデータやイベント ハンドラーなどの他の構成要素を削除します。

于 2013-07-17T20:07:54.317 に答える
1

バインドを解除する方が良いですが、しなければなりません。

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

do-i-need-to-remove-event-listenersも見ることができます

この問題を処理するより良い方法は、Event Delegate を使用することです。

于 2012-10-31T07:39:33.593 に答える
-1

Oscar の答えは不完全です。パーシャル (ajax 経由で読み込まれるビュー) 内で .on() を使用してイベントをアタッチした場合、.off() を .empty() の前に呼び出す必要があります。

次のコードを見てください。.off() が呼び出されない場合、標準の .click() ハンドラを介して p1.html に割り当てられたイベントは、.empty() を呼び出すと削除されますが、.on() を介して p2.html に割り当てられたイベントは削除されます。パーシャルがロードされるたびに削除および再割り当てされることはありません。

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-10T12:34:15.653 に答える