How can you bind an event handler only if it doesn't already exist?

Question

I have a page that I'd like to bind drag/drop events to. I'd like the entire page in the browser to be the drop target, so I've bound my events to the document object. My application's content is loaded in the main content area via AJAX, though, and I'd only like these event handlers to be active when the upload page is currently visible.

Right now, I'm binding the event handlers when the upload page is retrieved; however, each time the upload page becomes active, it binds a new event handler, which is causing the handler to fire multiple times when the user goes to the upload page, leaves, and then comes back. I was thinking I could resolve this if I could make the handler bind only when it's not already bound. Is this possible, or am I overlooking a better alternative?

Relevant code, if it helps:

$(document).bind('dragenter', function(e) {     e.stopPropagation();     e.preventDefault(); }).bind('dragover', function(e) {     e.stopPropagation();     e.preventDefault(); }).bind('drop', function(e) {     e.stopPropagation();     e.preventDefault();     self._handleFileSelections(e.originalEvent.dataTransfer.files); }); 

Answer 1

Unbind existing event handlers before you bind the new ones. This is really straightforward with namespaced events ^[docs]:

$(document)   .off('.upload') // remove all events in namespace upload   .on({       'dragenter.upload': function(e) {           e.stopPropagation();           e.preventDefault();       },       'dragover.upload': function(e) {           e.stopPropagation();           e.preventDefault();       },       // ...   });