Hiding Elements

Question

referring to my previous question I came accross to another problem. The div I am showing includes links in it. When I click on them, the div disappears as expected but not as desired.. (we want it to disappear whenever we click on anywhere on page... but the links inside them)

the code currently being used:

   $.listen('click', '.tabImg', function(event) {
                var el = $('#tabs_menu');
                var dv = $('.tabImg').parent();

                var pos = dv.offset();


                $(el).show();
                $(el).css( {"position": "absolute", "left": (pos.left) + "px", "top":20 + pos.top + "px" } );

                $(document).one('click', function()
                { 
                    $(el).slideUp().hide()
                });
                event.stopPropagation();
    });

tabs_menu being the div I am showing with links inside of it...

what is the workaround for this?

Answer 1

You have to add their own event listeners to the links and call event.stopPropagation() inside.

Answer 2

You need to bind your links to a click event and stop the bubbling so the document doesnt recieve the bubbled click.

I think a better approach to avoid binding multiple click events is to listen for the anchor being clicked inside the doucument click.

So basically if the element that triggered the click event is an anchor dont slide up

$(document).one('click', function(ev) { 
    if ( !$(ev.target).is('a') ){
        $(el).slideUp().hide()
    }
});