删除元素之前需要解除jquery事件吗？
我有一个页面使用jquery-ui-dialog。 每次对话框打开，页面内容使用ajax加载。 然后它使用jquery“on（）”绑定一些事件。 当对话框closures时，它将清空其内容。
问题是 ，我是否需要解除$ .empty（）之前的“.ajax-content”事件？
编辑 ： 关注1.任何可能降低JS性能？ 如果我用这种方式清空（）数百个节点。
关注2.将删除元素也从内存中删除事件（或任何执行/评价链的jQuery）？
现在我没有对他们做任何事情。 如果对话框多次打开/closures而不刷新页面，是否会导致任何问题？
代码如下所示：
<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(); 嘿，我知道这是一个古老的答案，但我相信接受的答案是误导。
虽然说你需要在原始JS上解除绑定事件以避免旧的浏览器（ehem IE）发生内存泄漏，但是调用remove（）或empty（）已经可以为你做这件事了。
所以你当前的调用empty（）应该足够了，不需要在unbind（）之前
从jQuery文档（ http://api.jquery.com/empty/ ）
为了避免内存泄漏，jQuery在删除元素本身之前从子元素中删除其他构造，如数据和事件处理程序。
解除绑定更好，但是必须。
大多数浏览器正确地处理这个并且自己删除这些处理程序。
您还可以看到do-i-need-to-remove-event-listeners
更好的方法来处理这个问题，你可以使用事件委托。
奥斯卡的答案是不完整的，如果你在使用.on（）附加你的partial（通过ajax加载的视图）附加事件，那么你必须在.empty（）之前调用.off（）。
看下面的代码，如果.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>
