jQuery UI 日期选择器在点击外部时不会隐藏

Question

我在我的网站上发现了 jQuery UI Datepicker 的问题。

当我点击输入时，它确实正确显示了一个日期选择器。 然而，当我不选择任何日期而只是在元素外部单击时，它不会像我期望的那样隐藏日期选择器。

当我按 Esc 键时，它会消失，当我选择一天时，它会消失，但当我单击外部时，它会保留在那里。

有谁能找出问题所在吗？

链接:http://pec.solarismedia.net/index.html#content

Answer 1

你的日期选择器有类hasDatepicker，所以试试这个:

$(".hasDatepicker").blur(function(e) { $(this).datepicker("hide"); });

我 99% 确信这会起作用!

仅供引用，如果您希望它是动态的(应用于之后创建的输入)，您可以使用 .on

$(".hasDatepicker").on("blur", function(e) { $(this).datepicker("hide"); });

UPDATE ^{(PS, to use the following completely remove the above from your code)}

为了回答您的评论，以下可能不是最好的解决方案，但通过反复试验(在您的网站上，使用控制台)它是有效的!与我想到的替代方法相比，它相对较短。

$(document).click(function(e) { 
    var ele = $(e.toElement); 
    if (!ele.hasClass("hasDatepicker") && !ele.hasClass("ui-datepicker") && !ele.hasClass("ui-icon") && !$(ele).parent().parents(".ui-datepicker").length)
       $(".hasDatepicker").datepicker("hide"); 
});

作为一条线

$(document).click(function(e) { var ele = $(e.toElement); if (!ele.hasClass("hasDatepicker") && !ele.hasClass("ui-datepicker") && !ele.hasClass("ui-icon") && !$(ele).parent().parents(".ui-datepicker").length) $(".hasDatepicker").datepicker("hide"); });

我遇到的问题是能够判断何时单击跨度图标，它并不是真正想要合作，因此额外有类检查