title: Dynamically disabling/enabling jquery click handlers using delegated events
body: <p>I have a number of clickable elements on a page that shouldn't be enabled until a resource gets loaded. My idea was to initialize the buttons with a <code>.disabled</code> class, which I would then remove when the resource was ready. In the meantime, I'd have a handler on the <code>.disabled</code> click event that would prevent event propagation to the other handlers.</p>
  <p>The problem is, even though I add the <code>.disabled</code> handler first, I can't get it to fire before the other click handlers.</p>
  <pre><code>$( &quot;body&quot; ).on('click','.disabled', function(e) {
          alert('disabled');
          e.stopImmediatePropagation();
          return false;
  });
  $('.clickable').click(function(e) {
       alert('enabled');   
  });
  // Call this when ready:
  //$('.clickable').removeClass('disabled');
  </code></pre>
  <p><strong>FIDDLE:</strong> <a href="http://jsfiddle.net/4rJxU/7/" rel="nofollow noreferrer">http://jsfiddle.net/4rJxU/7/</a></p>
  <p>This will pop up an 'enabled' alert first, and then a 'disabled' alert, presumably because the delegated events are captured by the parent of the <code>.clickable</code> elements, and are thus handled later?</p>
  <p>How can I disable click handlers using delegated events?</p>