Question

I created a date picker that uses ajax to populate an element with an id of calendarContainer. When the user clicks on a button to bring the calendar up, I want the user to be able to click anywhere else on the screen besides the calendar and have it hide. The calendarContainer is at the root of the dom and I have tried everything I can think of to get this working.

I have gotten the calendar to go away when it is not clicked on. However, when I click on the calendar it is also going away. I only want the calendar to go away when it is not clicked on.

Here are all of the things I have tried.

$(":not(#calendarContainer > table)").live('click', function() { $.Calendar.hide(); });
$(":not(#calendarContainer").live('click', function() { $.Calendar.hide(); });
$(":not(#calendarContainer)").click(function() { $.Calendar.hide(); });
$("body:not(#calendarContainer)").click(function() { $.Calendar.hide(); });
$(":not(#calendarContainer, #calendarData)").live('click', function() { $.Calendar.hide(); });

Thanks for any help, Metropolis

Answer 1

You’re seeing this behavior because events bubble, when you click on the calendar, you’re still firing a click on each of it’s parent elements because it bubbles up. To stop this, you need to stop the bubble, like this:

$("body").click(function() { $.Calendar.hide(); });

$("#calendarContainer").click(function(e) {
  e.stopPropagation(); //Stop click from bubbling to the body element
});