ansaurus

Question

why does calling methods on a div fire the live click event

Answer 1

+1 A:

That code should not fire the click event, you have something else going on there or invalid HTML messing with things (invalid HTML has all sorts of crazy side-effects with random behavior sometimes).

I would first check that your HTML is valid by going here: http://validator.w3.org/ Then check the following:

Are you clicking something inside that div, and the event happens because of a bubble?
Are you absolutely sure no other event handlers are attached to that element?
Do you have multiple nested .copyFoodInstance? If so you may want .closest() instead.
Instead of .attr() setting an invalid attribute, I would use .data() for storage.

Nick Craver 2010-05-13 10:25:29

@Nick Craver - i am clicking on a div inside the .copyFoodInstance div so it must be the bubble. is there anyway to prevent this?

ooo 2010-05-13 10:30:37

@Nick Craver - the bubbling is definately the issue. i have a workaround where i set an attribute in the inner event click and check for that flag in the outer event click and escape if its set to true. Is there any more elegant way ??

ooo 2010-05-13 10:33:49

@oo - On that element inside, in it's handler you can call [`e.stopPropgation()`](http://api.jquery.com/event.stopPropagation/), make sure to pass the event in as `e`, like this: `$(".insideSelector").click(function(e) { e.stopPropagation(); });`...also be aware that because your name is only 2 characters, you don't get alerted via my `@oo`, your name has to be at least 3 characters to get a message in your responses on SO.

Nick Craver 2010-05-13 10:35:47

@Nick Craver - first, thanks for the tip on the name. Second, the e.stopPropagation(); doesn't seem to work. It still fires the outer live click event on the outer div. any other ideas?

ooo 2010-05-13 10:44:17

@ooo - If the inner element's getting changed, it needs to use `.live()` as well, and it should be bound **before** the `$('div.copyFoodInstance').live(` handler so it executes first.

Nick Craver 2010-05-13 10:57:04

@Nick Craver - that makes sense. let me give it a try

ooo 2010-05-13 11:33:59

@Nick Craver - the inner div is using live. i moved that .live call above the outer div call and then added e.StopPropagation(); but it still is firing. .

ooo 2010-05-13 11:37:19

@ooo - Have a link I can see it at? Also, just in case, in your `$('div.copyFoodInstance').live(function(e) {` (pass the `e`!), what does `alert(e.isPropagationStopped());` give you?

Nick Craver 2010-05-13 11:51:29

@Nick Craver - alert(e.isPropagationStopped()); returns true in this case (but by definition, if this is stop propagation is true, shouldn't this code never been hit in the first place because this event shouldn't have fired ??)

ooo 2010-05-13 11:57:05

@ooo - Depends on your page/ordering, `e.stopPropagation()` stops it from bubbling, but `.live()` works on `document`...so it's not actually bubbling anymore, it's all happening on `document`. In your code just do a `if(e.isPropagationStopped()) return;` in the second handler so it doesn't execute.

Nick Craver 2010-05-13 12:13:57

good idea . . your if check is a little more explicit than setting a random attribute value as a flag. Do i need to ever put a "startPropogation" back in anywhere or does this value only hold its state for that one call stack?

ooo 2010-05-13 12:23:35

@ooo - It only applies this this occurrence of this event, no need to reset anything.

Nick Craver 2010-05-13 12:35:04

ansaurus

tags:

views:

answers:

why does calling methods on a div fire the live click event

related questions