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?

possible duplicate of [How to stop event bubbling with jquery live?](http://stackoverflow.com/questions/1967537/how-to-stop-event-bubbling-with-jquery-live) — Shog9, Aug 18 '10 at 06:08

score 4 · Accepted Answer · edited Aug 18 '10 at 06:17

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 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()

edited Aug 18 '10 at 06:17

Shog9

156,901
35
231
235

answered Aug 18 '10 at 05:52

jAndy

231,737
57
305
359

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) – Parag Aug 18 '10 at 06:35
@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) – jAndy Aug 18 '10 at 06:51
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 `
` elements below... [example](http://jsbin.com/ajizu3/2/) The inline handler will have to go.

Shog9

Aug 18 '10 at 06:58

@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. – jAndy Aug 18 '10 at 07:32

@Shog9 yeah... if i write: $('#update-list').delegate('.popup-link', 'click', function(e){ return false; }); the inline click still fires – Parag Aug 18 '10 at 07:37

score 1 · Answer 2 · answered Jan 03 '16 at 15:21

1

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

answered Jan 03 '16 at 15:21

M. Salah

671
7
10

score 0 · Answer 3 · answered Aug 18 '10 at 05:55

0

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

answered Aug 18 '10 at 05:55

naikus

24,302
4
42
43

You need to `return` **false** withing live or delegate to prevent the default bevavior and bubbling. – jAndy Aug 18 '10 at 05:58

score -1 · Answer 4 · edited Oct 18 '12 at 08:03

-1

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

It will work fine

edited Oct 18 '12 at 08:03

Stephan

41,764
65
238
329

answered Oct 18 '12 at 08:02

Akash Malhotra

367
1
12

Stop propagation with jQuery delegate/live function not working

4 Answers4