Removing DOM event handlers in long-running browser session

Question

I have a browser interface with a ul#contacts list on the left and div#contact property panel (email, phone) on the right. Click a contact in the list and my app makes an XHR request to get the contact property HTML fragment and update div#contact.innerHTML.

Each contact fragment has an "Edit Contact" link. With JS, I progressively upgrade that link with an event listener that performs an XHR request to replace the static property panel with an in-place edit form. This can happen many times during a single browser session.

How should I clean up my "Edit Contact" event listener? Do I need to remove it manually before the form overwrites the property panel? Or is the event listener cleaned up automatically when the contents of div#contact (and the node that I'm listening on) is overwritten?

FWIW, I still consider IE6 to be part of my target market.

Answer 1

You would have to detach your listeners first, yes. However, the simplest thing is to not attach to the link directly, instead using event delegation. If you're using jQuery, it's made even simpler via the live method.