title: How can you bind an event handler only if it doesn't already exist?
body: <p>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 <code>document</code> 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.</p>
  
  <p>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?</p>
  
  <p>Relevant code, if it helps:</p>
  
  <pre><code>$(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);
  });
  </code></pre>