Prevent click event from affecting parent jquery

Question

I was to stop the event propagation from the child to the parent, i have a bunch of li tags containing a.

$('li a[rel=close]').live('click', function(e){
    e.stopPropagation();
    e.preventDefault();
})

But it doesn;t stop the event.Any suggestions ?

Answer 1

stopPropagation has problems with live, from the jQuery stopPropagation docs -

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

As Rob W has said your code would work fine with bind, here's a demo - http://jsfiddle.net/TmKyT/

Answer 2

Use .bind instead of .live. The live event is triggered at the end of the propagation tree. live is only more useful than bind when you want to also bind the event listener for elements which are created later.

Answer 3

Maybe try using delegate?

$('ul.parent').delegate('li a[rel=close]', 'click', function( event ) {

}