Assign click event inside click event

Question

Inside of an onclick event, I'm binding another onclick event. But when I initiate the first event, the second always executes:

var MiniMenu = {
    show : function(menu_id, element){ 
        // this doesn't have any thing to do with the problem - I think
        position = $(element).offset();
        $('#' + menu_id).css({
            left : position.left,
            top : position.top + 13
        }).show();

        // Why is this event called on the first click, 
        // even though it isn't bound at that time?
        $(document).click(function(){
            alert('here')
            $('.mini-menu').hide();
            $(document).unbind('click')
        })
    }
}

I'm using Adobe Air - if that helps :)

I guess I would need to see more code, like the first click event...seems something is missing here — Mark Schultheiss
– Mark Schultheiss, Commented Jan 31, 2010 at 2:42

Leo · Accepted Answer · 2010-01-31 02:47:33Z

I guess because the click-event just bubbles up ;-)

Think of the following: you have a stack of event handlers assigned to the click event, probably most of them without you knowing of their existance

Your click handler <-- currently executing
...
System click handler 2 <-- already finished
System click handler 1

Now while executing, your click handler adds another listener to this event.

New click handler
Your click handler <-- currently executing
...
System click handler 2
System click handler 1

When your first click handler finishes, the click event just gets passed to the next listener in the queue (this is called bubbling), because you don't prevent the event propagation. That means that after Your click handler returns, you have the following situation:

New click handler <-- currently executing
Your click handler
...
System click handler 2
System click handler 1

Gabriel McAdams · Accepted Answer · 2010-01-31 02:46:38Z

1

This may be a bubbling issue. Is the first click event's source element something inside of your document? (or is it the document, as is the second click event handler?)

Events bubble up to the container all the way to the document. If you're handling the event on an image or something, and then setting the click event handler on something up the chain, it may be fired right afterward.

answered Jan 31, 2010 at 2:46

Gabriel McAdams

58.5k12 gold badges67 silver badges78 bronze badges

Comments

BenMorel · Accepted Answer · 2013-12-14 18:53:58Z

0

 $(document).click(function(){ 
                alert('here') 
                $('.mini-menu').hide(); 
                $(document).unbind('click') 
            })

This binds the click to the document really, so ANY click anywhere in the document will cause this to be activated...

I would need more information to be able to isolate what you REALLY want to do with this even.

EDIT: Just to add some info, you may want to return FALSE side the event to prevent the event from propagating (bubbling) up the document and to stop. Study the event handling documentation for jQuery for more tangible results pertinent to your situation.

EDIT2: to explain, when you bind the DOCUMENT here, once the function completes, the document still has the event and then activates it at that time (after the function)... I hope I am explaining this so it makes sense.

edited Dec 14, 2013 at 18:53

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Jan 31, 2010 at 2:45

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

2 Comments

Matt Over a year ago

I open a menu with show(). When someone clicks again, I want the menu to disappear. Is there a better way to do it?

Leo Over a year ago

Sure. Just bind one click handler and inside this function, just do a switch (menu.visible) ;-) depending on which case you have, you can just show or hide the menu from within the same function.

Collectives™ on Stack Overflow

Assign click event inside click event

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related