jQuery live() and stopPropagation() issue

Question

I know that the live() event handles event bubbling different than all other jQuery events. jQuery recommends using 'return false', but in my case that doesn't work.

The issue is:

I have a DIV which contains an anchor tag.

The DIV is bound using live(). Whenever I click the anchor tag inside this DIV it bubbles and calls the DIV's event. If I bind an event to that A tag which returns false it prevents the link from opening. Neither stopPropagation() or return false work in this case. Are there any other options? Ideally I'd like to keep the live() event around.

Answer 1

element.preventDefault();

stopPropagation will stop the bubbling whereas preventDefault will make sure the default action of the affected element will not trigger.

Answer 2

this should work as long has your anchor href is to a url, not sure what would happen if it was a javascript method call - guessing would not be good.

$("#the-div").live('click', function (e) {
  var tag = e.target.tagName;
  if (tag === "A") {
    window.location.href = e.target.href;
    return false;
  }
  // else do the div click handling
});

seems like there is probably a more elegant way to do this, but I have no clue.