Question

How can I tell using jQuery if an any element within a div (panel1) was clicked? I have this piece of code that I use to show/hide a popup:

$('body').click(function (e) {
        if ($(e.target).attr('id') == 'link1') {
            $('#panel1').show();
        } else {
            $('#panel1').hide();
        }
    });

The problem is that the popup (panel1) gets dismissed if I click on any control/element within panel1. I’d like to keep panel1 open unless an area outside panel1 is clicked (or if link1 is clicked again). How can I revise this code to achieve this? Thanks…

Answer 1

Try this

$('#panel1').click(function (e) {
       e.stopPropagation();
       //Other code if you want to execute anything on panel click.
    });

$('body').click(function (e) {
       if($("#panel1").is(":visible")) 
          $('#panel1').hide();
    });