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?

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?

• javascript
• jquery
• jquery-events
• delegation

• possible duplicate of How to stop event bubbling with jquery live? – Shog9 Commented Aug 18, 2010 at 6:08
• add "return false" to delegate function; – RockOnGom Commented Feb 12, 2015 at 13:18

4 Answers 4

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 pletely unobtrusive (which is what I highly remend) 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()

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

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;
});

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

It will work fine