Single Page App - memory leak explanation

Question

So, I'm studying about SPA, and I know there's a lot of FrameWorks to help building one. But let's suppose here that I'm doing only using jQuery.

Ok, so in one page, I create a table displaying user contacts, from an Ajax call:

getContacts('', function(contactsObj)
    {
        contactsObj.forEach(function(contact)
        {
            $('#contactList > tbody').append('<tr>' +
                                                '<td class="check-mail">' +
                                                    '<input type="checkbox" class="i-checks" id="1">' + 
                                                '</td>' +
                                                '<td>' + escapeHTML(contact.name) + '</td>' +
                                                '<td>' + escapeHTML(contact.email) + '</td>');
        })  

        $('.i-checks').iCheck(
        {
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green'
        });
    });

This code is real, and actually working. What worries me about is the iCheck (used to stylize the checkbox), after adding the rows on the table, I initiate the iCheck to get it working. So, when the user leaves this page (without reloading anything, this is a single page application, remember?), this iCheck will just become 'ghost'... I know that for events, I can call off() method to remove all previously binded events (this avoid memory leaks?), but for this kind of initiation I talked here, this will be a memory leak too?

Answer 1

In this specific case, iCheck has a 'destroy' method which 'removes all traces of iCheck' (see the iCheck docs ). If you call this when this user navigates away from the relevant view (before the DOM has been modified), there should be no memory leak.

Otherwise there would almost certainly be 'hanging' event handlers left in memory after the page transition, although as noted in the comments their total memory usage would probably be neglible.