Добавить событие ко всем элементам, кроме заданного с помощью jQuery

Question

Я создал средство выбора даты, которое использует ajax для заполнения элемента идентификатором calendarContainer. Когда пользователь нажимает кнопку, чтобы открыть календарь, я хочу, чтобы пользователь мог щелкнуть в любом месте экрана, кроме календаря, и скрыть его. CalendarContainer находится в корне домена, и я попробовал все, что мог придумать, чтобы это заработало.

Я получил календарь, чтобы уйти, когда на него не нажимают. Однако, когда я нажимаю на календарь, он тоже уходит. Я хочу, чтобы календарь пропал, когда на него не нажимали.

Вот все, что я пробовал.

$(":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(); });

Спасибо за любую помощь, Метрополис

Answer 1

Вы наблюдаете это поведение, потому что события всплывают, когда вы нажимаете на календарь, вы все еще нажимаете на каждый из его родительских элементов, потому что он всплывает. Чтобы остановить это, вам нужно остановить пузырь, как это:

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

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

Answer 2

Вы должны взглянуть на кнопку external plug в . По сути, он устанавливает событие click для элемента body, а затем сравнивает цель события, чтобы увидеть, равен ли он необходимому селектору, и прекращает распространение оттуда.

Answer 3

Вам нужно что-то выбрать.

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

работает?