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();
      },
      // ...
  });

Answer 2

For those who want to add the event only once, avoiding using the unbind()/off() and bind()/on() methods for each new cloned element.

I found on the Code Project website the article "Binding Events to Not Yet Added DOM Elements with JQuery (by Khrystyna Popadyuk)" that shows how to register the event only once, even before the element exists. Read his full article for details.

$("body").on("click", ".your-style", function(event) {
       // your code ...
});