ansaurus

Question

jquery stopPropagation problem with live method

Answer 1

+2 A:

That is because .live() relies on event propagation.

The event is not actually placed on the element, but rather on the root node. The event then bubbles up to that node, checks the selector to see if it has a match, and fires if so.

Because the event isn't fired until it is already at the top of the hierarchy, there's no propagation left to stop.

patrick dw 2010-07-28 13:33:47

Hi, Thanks for your quick response. But i couldn't get it how to implement. Can u tell me where should i change my code.

2010-07-28 13:48:29

@user - See Nick's answer. He has a good solution that uses `e.isPropagationStopped()` to check to see if you stopped propagation.

patrick dw 2010-07-28 13:51:52

@user - Are you sure you need `.live()`? Are the elements being added dynamically to the page, or are they there when the page loads? If they exist when the page loads, then don't use `.live()`. Use `.bind()` instead.

patrick dw 2010-07-28 14:04:38

yes, elements are added dynamically on the page.

2010-07-28 14:41:26

Answer 2

+3 A:

You just need to change the order of your handlers a bit, and use/check for propagation stopping, like this:

$("a.infolink").live("click",function(e){
    $("a.infolink").removeClass("selected");
    $("div.infomenu").hide();
    $(this).addClass("selected");
    $(this).next().show();
    e.stopPropagation();
});
$("div.infomenu").live("click",function(e){
    e.stopPropagation();
});
$(document).click(function(e){
    if(e.isPropagationStopped()) return;  //important, check for it!
    $("a.infolink").removeClass("selected");
    $("div.infomenu").hide();
});
$("input.clickme").click(function(e){
    alert("I am fired");
});

Give it a try here, there are a few important points to keep in mind:

.live() handlers are on document
Event handlers execute in the order they were bound to any given element

You need to stop and check the propagation since we're at the same level. .stopPropagation() would prevent the bubbling from going any higher but that doesn't matter, it's at the same level in the DOM, so you need to check if it was stopped, using .isPropagationStopped(). Also, since the handlers fire in order, you need to bind that document.onclick after your other event handlers, otherwise it'll execute first, before the others tried to stop propagation.

Nick Craver 2010-07-28 13:38:15

+1 - I had forgotten about `.isPropagationStopped()`. I was about to suggest a fragile solution that tested the `e.target`. Yours is much nicer. (FYI, you have a typo. Look at your first `e.stopPropagation()`) :o)

patrick dw 2010-07-28 13:49:01

@patrick - Fixed, thanks :) I was initially thinking Immediate for consistency here, but it's not really necessary, didn't get all of the "Immediate"s out of there :)

Nick Craver 2010-07-28 13:58:56

yes it is working great. Thank u very much nick.

2010-07-28 15:29:33

@user400091 - Welcome :) Remember to accept answers to questions via the checkmark beside the one that helped :)

Nick Craver 2010-07-28 15:32:30

ansaurus

tags:

views:

answers:

jquery stopPropagation problem with live method

Code:

related questions