Question

I have a div with a nested link. The div has a delegate handler for 'click', which alerts “Div”. The link within the div also has a delegate handler for 'click' wherein e.preventDefault(); is called before alerting “Link”. When I click the link, I see the “Div” alert, and the “Div” alert. I’m unclear why this is happening since I’m attempting to stop propagation from the link’s click handler.

JavaScript

$('body').delegate('.outer', 'click', function(e){
    e.preventDefault();
    alert('Div');
});

$('body').delegate('.outer a', 'click', function(e){
    e.preventDefault();
    alert('Link');
    // Note: I've also tried returning false (vs using preventDefault), per the docs
});

HTML

<div class="outer">
    <a href="#">Click me</a>
</div>

Answer 1

1. PreventDefault doesn’t stop propagation, it stops the default action from being taken.

2. Returning false/stopPropagation doesn’t work on delegated/live events because by the time it reaches the element on which the event is defined, it has already propagated up. It will stop propagation to elements higher in the DOM, but not prevent handlers at the same level (or lower) from being invoked. See this from the http://api.jquery.com/delegate documentation.

   Since the .live() method handles events once they have propagated to
   the top of the document, it is not possible to stop propagation of
   live events. Similarly, events handled by .delegate() will propagate
   to the elements to which they are delegated; event handlers bound on
   any elements below it in the DOM tree will already have been executed
   by the time the delegated event handler is called. These handlers,
   therefore, may prevent the delegated handler from triggering by
   calling event.stopPropagation() or returning false.

3. If you don’t want the other handlers at the same level/DOM element to run, you can use stopImmediatePropagation. Note that the order in which the handlers are applied is important.

4. You should probably be using on(), instead of delegate/live as of jQuery 1.7.