jQuery Propagation issue

Question

another silly question, i cant quite figure it out via all the other threads so hopefuly someone here can.

a demo is at http://jsfiddle.net/OwenMelbz/PaAt2/

basically ive got it so

when click inside document
spawn div

when click div
do nothing

when doubleclick div
do this

at the moment, when i double click it, it DOES run the code, but it also spawns another div where i click on the element.

my code is on jsfiddle as i posted above!

thanks

Answer 1

Not sure why but this worked for me. http://jsfiddle.net/PaAt2/4/. It might have to do with how live handles events vs bind.

Answer 2

Keith is right that his solution works because of the difference between how live() and bind() work.

bind() attaches your event handler to all the DOM elements in the jQuery object it is called on. live() attaches an event handler from jQuery to the 'Event Context' (look up http://api.jquery.com/live for futher info). By default this is the root of the DOM tree. This event handler sits there catching events that bubble up (or propagate from) DOM objects inside the object it is bound to. When it catches one, it looks at what originated the event and if it matches the selector of the jQuery object to which live() was applied, it runs the function argument you supply as the your event handler.

This means that if you have a container (which is '#project-wrap' in this example) and bind to its click event, you will normally get clicks originating from anything inside that container, because they will bubble up to the container. But if you bind an event to the container using live(), you will only get clicks which originated from that container itself i.e. clicks from empty space within the container, not clicks on anything contained within it.