Add event to all elements except the given with jQuery

Question

Hey everyone

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 need to select something. Does

$("*:not(#calendarContainer").live('click', function() { $.Calendar.hide(); });

work?

Answer 2

You should have a look at the click outside plug in. Basically what's it's doing is setting a click event on the body element and then comparing the event target to see if it's equal to the selector you need and stopping propagation from there.

Answer 3

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
});