在刪除元素之前，我需要解除綁定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

嘿，我知道這是一個古老的答案，但我相信接受的答案是誤導。

雖然說您需要解除原始JS上的事件以避免舊版瀏覽器（ehem IE）上的內存泄漏是正確的，但調用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

奧斯卡的答案是不完整的，如果你的局部內（認爲的VIA AJAX加載）您.empty之前使用。對（），則必須調用.off（）事件連接（）。

查看以下代碼，如果未調用.off（），則在調用.empty（）時將除去通過標準.click（）處理程序在p1.html中分配的事件，但會在p2.html通過中分配事件。 on（）不會被刪除，並在每次加載partial時重新分配。

索引。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 'click'，'a'，function）到$（「＃spi a」）。on（'click'，function），你會得到你想要的效果。 – Oscar

在刪除元素之前，我需要解除綁定jquery事件嗎？

回答

相關問題