我是否需要删除元素之前取消绑定jQuery的事件？(Do I need to unbind jque

我使用jQuery UI的，对话的页面。每个打开的对话框时，页面内容加载使用AJAX。然后，它结合使用jQuery“上（）”某些事件。当对话框关闭，它会清空其内容。

现在的问题是 ，我需要之前$ .empty（）解除绑定的“阿贾克斯内容”的事件？

编辑 ：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事件，以避免对旧的浏览器的内存泄漏（ehem IE），调用remove（）或空（）都已经为你做的。

所以，当前呼叫空（）应该是足够的，它不需要被解除绑定前面（）

从jQuery的文档（ http://api.jquery.com/empty/ ）

以避免内存泄漏，jQuery的去除元件本身之前除去其他结构，例如从子元素数据和事件处理程序。

Answer 2:

这是更好地解除绑定，但必须。

大多数浏览器正确处理这一点，并删除这些处理程序本身。

您还可以看到做-I-需要去除的事件，监听器

更好地处理这个问题的方式，您可以使用事件委托。

Answer 3:

奥斯卡的答案是不完整的，如果你的局部内（认为的VIA AJAX加载）您.empty之前使用。对（），则必须调用.off（）事件连接（）。

看看下面的代码，如果.off（）不被调用，调用.empty（）时，通过标准。点击（）处理程序p1.html分配事件被删除，但通过。对分配在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>

文章来源: Do I need to unbind jquery event before remove element?