Stop propagation with jQuery delegate/live function not working

Question

Here's the problem html:

<ul id="update-list">
<li class="update" onclick="window.location('some_url')">
  <h2> some header </h2>
  <p> some paragraph </p>
  <div>
    <a class="popup-link">
      <span> Show Popup </span>
      <span> + </span>
    </a>
  </div>
</li> 
// this repeats n times
//...
</ul>

When I click on .popup-link link, it should open the lightbox popup only (which it does) but the inline onclick on li also fires. The thing is that the li tags are all part of some partial which is fetched via ajax on different pages. So I use jQuery's delegate to bind the events as follows:

$('#update-list').delegate('.popup-link', 'click', function(e){
    // e.target is <span> while e.currentTarget is .popup-link 
    e.stopPropagation();
    //console.log(e.isPropagationStopped());  this shows 'true' in console
    $.popup();   // launch popup
    e.preventDefault(); // or return false
});

This doesn't seem to work and the inline onclick fires anyway. I've tried with live() as well but no success. Is there something I am missing here?

Vescuso

possible duplicate of How to stop event bubbling with jquery live? – Fig

add "return false" to delegate function; – Nomo

Answer 1

AFAIK you cannot reliably prevent an inline event handler from firing by stopping the bubbling within an attached event handler.

Furthermore, using live() or .delegate() you cannot use preventDefault() nor stopPropagation(). You need to return false to prevent the bubble phase and the default behavior.

Anyway, as I already mention you can't prevent the inline event handler to fire with that.

So either, create it completely unobtrusive (which is what I highly recommend) or remove that inline click handler in code.

Example:

$('#update-list').delegate('.popup-link', 'click', function(e){       
   $.popup();   // launch popup
   return false;
}).delegate('.update', 'click', function(){
   window.location('some_url');
})
// the rest of this is unnecessary if you can just omit the onclick attribute 
.find('.update')
  .removeAttr('onclick'); 

Ref.: .delegate()

Colorimeter

hmmm...actually the links are created via server language tags: window.location("<%= url/param %>"). I know its obtrusive and not recommended but i guess i don't have a choice here. Would you suggest a solution (although its not part of this question) – Vescuso

@fenderplayer: it looks like Shog9 updated the post with a removal code for the inline handler. Anyway, it looks like return false does prevent the inline handler from firing (for me, Chrome 5) – Colorimeter

I don't think return false will do much good with the inline handler there - by the time the event bubbles up to the handlers on update-list, it's already been through the handlers on the <li> elements below... example The inline handler will have to go. – Fig

@Shog9: Uh well, yes. I step back to my first opinion within the post. I thought it works because of a mistake from me on testing. – Colorimeter

@Fig yeah... if i write: $('#update-list').delegate('.popup-link', 'click', function(e){ return false; }); the inline click still fires – Vescuso

Answer 2

 $('#update-list').delegate('.popup-link', 'click', function(e){       
  e.stopImmediatePropagation();
  e.preventDefault();
  // do something...
});

Coray

Answer 3

Can you try this?

$('#update-list').delegate('.popup-link', 'click', function(e){
    // e.target is <span> while e.currentTarget is .popup-link 
    e.stopPropagation();
    e.preventDefault(); // or return false

     // open popup in a timeout so that this function can return false
    window.setTimeout(function() {$.popup();}, 20);

    // for IE
    e.cancelBubble = true;
    return false;
});

Glen

You need to return false withing live or delegate to prevent the default bevavior and bubbling. – Colorimeter

Answer 4

You can try this as .delegate() has been superseded by the .on() method.

It will work fine

Andino