将事件添加到除 jQuery 给定之外的所有元素

Question

我创建了一个日期选择器，它使用 ajax 填充 id 为 calendarContainer 的元素。当用户单击按钮以调出日历时，我希望用户能够单击屏幕上除日历之外的任何其他位置并将其隐藏。 calendarContainer 位于 dom 的根目录，我已经尝试了所有我能想到的方法来让它工作。

我已经让日历在未点击时消失。但是，当我单击日历时，它也会消失。我只希望日历在未被点击时消失。

这是我尝试过的所有方法。

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

你需要选择一些东西。有没有

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

工作？

Answer 2

你应该看看点击outside plug in。基本上它所做的是在 body 元素上设置一个点击事件，然后比较事件目标以查看它是否等于您需要的选择器并从那里停止传播。

Answer 3

您看到这种行为是因为事件冒泡，当您点击日历时，您仍然会点击它的每个父元素，因为它会冒泡。要停止这种情况，您需要停止气泡，如下所示：

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

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