I have a site that is entirely driven by ajax. Once the page loads, the page never re-loads entirely unless it is refreshed. I have a few different apps running on this site and I am using .on() to add event handlers at the document level, but these should only be applied when a certain application is being used on the site. In order to avoid saturating the site with unnecessary event handlers, im wondering if there are any side-effects of using $(document).off() when the user switches applications. This should clear all of the events I bound before attaching new ones. I just want to make sure im not un-binding something I dont know about.
You can use jQuery event namespaces. To add events to $(document) use the application name as namespace, and then remove all of them using the same namespace.
For example, if you you've application named "appA", and you want to add event listeners for a series of events:
$(document).on('resize.appA', function() { });
$(document).on('anotherEvent1.appA', function() { });
$(document).on('anotherEvent2.appA', function() { });
Now to remove all application event on document just use:
$(document).off('.appA');
btw - this will work only on events directly added to document, and not to any children. If you want to affect children as well, bind the events to $(document), and use event delegation to affect the children. In this way, you can remove all app events at once.