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

Answer 1

 $(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 propogating (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 fuction 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.

Answer 2

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.

Answer 3

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