在删除元素之前，我需要解除绑定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事件吗？

回答

相关问题