Do I need to unbind jquery event before remove element?

前端未结

关注

 3  786

I have a page using jquery-ui-dialog. Each time the dialog opens, page contents load in using ajax. Then it binds some event using jquery \"on()\". When the dialog close,

相关标签:

3条回答

北荒

2020-12-24 11:16

Hey I know this is an old question but I believe the accepted answer is misleading.

Although it's correct to say that you will need to unbind events on raw JS to avoid memory leaks on old browsers (ehem IE), calling remove() or empty() will already do that for you.

So your current call to empty() should be enough, it doesn't need to be preceded by unbind()

From jQuery docs (http://api.jquery.com/empty/)

To avoid memory leaks, jQuery removes other constructs such as data and event handlers from the child elements before removing the elements themselves.

0 讨论(0)
发布评论:

提交评论
- 加载中...

长情又很酷

2020-12-24 11:29

Oscar's answer is incomplete, if inside your partial (view that's loaded via ajax) you attached events using .on(), then you must call .off() before .empty().

Look in the following code, if .off() is not called, events assigned in p1.html via standard .click() handler are removed when calling .empty(), but events assigned in p2.html via .on() are not removed and re assigned each time the partial is loaded.

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>

0 讨论(0)

猫巷女王i

2020-12-24 11:32

It's better to unbind but must.

Most browsers handle this correctly and remove those handlers themselves.

You can also see do-i-need-to-remove-event-listeners

Better way to handle this problem, you can use the Event Delegate.

0 讨论(0)
发布评论:

提交评论
- 加载中...