DOM Caching and event listening
when a page is automatically removed from the dom, are any event listeners that may have been bound to elements in the page automatically removed?
If not, what is the best practice for removing event listeners?
ie, I have the following script:
- $(document).on({
- pageinit : function(evt) {
- // do stuff here set up some listeners
- // perhaps asynchronously load google map api... and set up event listeners for markers, etc
- }, // end page init
- pageshow : function(evt) {
- //
- } // end pageshow
- },'#specific page id');
I was initially under the impression that once a page was viewed, it stayed in the dom and pageinit would only get called once for that page...
What actually happens:
1) Browse to that page...the above script runs and pageinit gets triggered once.
2) Now say you navigate away from the page... the page is removed from the dom... (but the above script is still active). (how about any other event listeners set up.. say for the map markers... are they unregistered?)
When we come back to this page... the script is reloaded/rerun.
3) Viewing this page for a second time pageinit will fire twice for this one page
If the page had been cached in the dom, pageinit wouldn't fire at all on any revisits.
at most, I'd expect these triggers to trigger only once.
So, in a nutshell, what are the best practices in making sure events only fire once (scripts only loaded once) and for unregistering event listeners
further example... I may want to listen for events on pageshow, but stop listening on pagehide