2010-03-19 2 views
0

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

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

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

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

Спасибо за любую помощь, Metropolis

ответ

1

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

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

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

Awesome! Спасибо, много Ник. Я никогда не понимал, что это пузырь. Я думал, что это могло быть здесь, но я не был уверен. как пузырьки работают в небольшом масштабе, но не на весь дом. У вас есть хорошие подсказки для барботажа или хорошего учебника? – Metropolis

+0

@Metropolis - Quirksmode имеет достойное объяснение, я думаю: http: //www.quirksmode. org/js/events_order.html На самом деле это не отличается от небольших и больших масштабов, события просто продолжают пузыриться до DOM если вы не остановите их. Некоторые события не пузырятся или не работают в некоторых браузерах (хотя jQuery в большинстве случаев компенсирует это), поэтому есть несколько причуд, но ничего сложного по сравнению с базой. –

+0

Если я прекращаю распространение, хотя ..... это мешает каким-либо событиям после него? Как узнать, что я останавливаю, и что я хочу продолжать работать? Я прочитал эту статью о пузырях раньше, это очень хорошо. Спасибо за помощь. – Metropolis

0

Вы должны выбрать что-то. Does

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

произведение?

+0

Спасибо за помощь. Том. Это делает то же, что и раньше. Я думал, что если вы делаете $ (": not (#calendarContainer"). Live ('click', function() {$ .Calendar.hide();}) ;, что это то же самое, что и *. – Metropolis

+0

Я также попробовал $ ("body: not (#calendarContainer)"). click (function() {$ .Calendar.hide();}); раньше, и он также делал то же самое, что я думал, будет таким же as *. – Metropolis

+0

'body: not' будет искать теги тела без этого id. – Tom

0

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

Смежные вопросы