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

感谢任何帮助，Metropolis

Answer 1

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

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

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

Answer 2

你需要选择一些东西。确实

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

工作？

Answer 3

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

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

3 个答案: