是否需要在删除元素之前解除jquery事件的绑定？
我有一个使用jquery对话框的页面。每次打开对话框时，都会使用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();回答 3
Stack Overflow用户
发布于 2013-07-17 20:07:54
嘿，我知道这是个老掉牙的问题，但我相信这个公认的答案是误导人的。
虽然正确地说，您需要解除绑定原始JS上的事件，以避免旧浏览器(ehem IE)上的内存泄漏，但是调用remove()或空()已经可以为您完成此任务。
因此，当前对空()的调用应该足够了，不需要在前面加上unbind()
来自jQuery docs (http://api.jquery.com/empty/)
为了避免内存泄漏，在删除元素本身之前，jQuery从子元素中删除数据和事件处理程序等其他结构。
Stack Overflow用户
发布于 2012-10-31 07:39:33
最好解除束缚，但必须这样做。
大多数浏览器都会正确地处理这些问题，并自行删除这些处理程序。
您还可以看到do-i-need-to-remove-event-listeners
处理此问题的更好方法是使用事件代理。
Stack Overflow用户
发布于 2014-04-10 12:34:15
Oscar的回答是不完整的，如果在部分(通过ajax加载的视图)中使用.on()附加了事件，那么必须在.empty()之前调用.off()。
查看下面的代码，如果没有调用.off()，则在调用.empty()时，将移除p1.html中通过标准.click()处理程序分配的事件，但在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>https://stackoverflow.com/questions/10957709
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号