Question

我有一个使用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();

Answer 1

嘿，我知道这是一个老问题，但我相信接受的答案是误导性的。

虽然说你需要在原始JS上取消绑定事件以避免旧浏览器（IE浏览器）上的内存泄漏是正确的，但调用remove（）或empty（）已经为你做了。

所以你当前对empty（）的调用应该足够了，不需要在unbind（）

之前。

来自jQuery docs（http://api.jquery.com/empty/）

为了避免内存泄漏，jQuery会在删除元素本身之前从子元素中删除其他构造（如数据和事件处理程序）。

Answer 2

取消绑定最好但必须。

大多数浏览器都能正确处理并自行删除这些处理程序。

您还可以看到do-i-need-to-remove-event-listeners

更好的方法来处理此问题，您可以使用事件代表。

Answer 3

奥斯卡的答案是不完整的，如果在你的部分内部（通过ajax加载视图）你使用.on（）附加了事件，那么你必须在.empty（）之前调用.off（）。

查看下面的代码，如果没有调用.off（），则在调用.empty（）时会删除通过标准.click（）处理程序在p1.html中分配的事件，但是在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>

在删除元素之前，我是否需要取消绑定jquery事件？

3 个答案: