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.

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.

• javascript
• jquery
• ajax

• no way for us to know what you can or can't unbind in your app ... it's your code and we can't see any of it – charlietfl Commented Aug 15, 2015 at 13:48
• To clarify, I want to unbind absolutely everything that I bound. I just want to be sure that im not unbinding something that jQuery binds to the document when it initializes. – Kirk Logan Commented Aug 15, 2015 at 13:50
• Won't affect anything within jQuery core. Any plugins you use would need to be assessed individually though – charlietfl Commented Aug 15, 2015 at 13:52
• Understood, thanks for the quick response – Kirk Logan Commented Aug 15, 2015 at 13:52

1 Answer 1

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.