Jquery Ignore Event

Question

Let's say we have this markup:

<span href="">Text <a href="">Link</a></span>

We have events bound to both elements. How do I make it such that when I click on the anchor tag, the event on the parent will not be triggered? I've tried using the Jquery method stopPropagation() but still no luck. Any thoughts? Thanks.

Answer 1

How are you using stopPropagation()? Something like this should work:

$("a.something").click(function(event){
  event.stopPropagation();
  window.location.href = '/your/destionation.html';
}); 

Answer 2

Not sure why stopPropagation() isn't working for you. Given your HTML example, the following code functions properly, as the event on the span is not fired.

$('span').click(function() {
    alert('span');
});

$('a').click(function(e) {
    e.stopPropagation();
    alert('a');
});

If you're using live() to bind your event handlers, then you'll have issues.