单击外部时 jQuery UI 日期选择器不会隐藏 [英] jQuery UI datepicker doesn't hide when click outside

问题描述

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

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

当我按下 Esc 时，它会消失，当我选择一天时它会消失，但当我在外面单击时它会留在那里.

有没有人能找到问题所在?

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

解决方案

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

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

我 99% 肯定这会起作用！

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

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

<块引用>

UPDATE ^{(PS，要使用下面的代码完全删除上面的代码)}

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

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

作为一行

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

我遇到的问题是当span图标被点击时可以判断，它不是真的想合作，因此额外的有类检查

I found a problem with jQuery UI Datepicker on my site.

When I click on the input, it does show a datepicker properly. Nevertheless, when I don't select any date and I just click outside the element, it doesn't hide the datepicker as I'd expect.

When I press the Esc, it disappears, when I select a day it disappears but when I click outside it stays there.

Is there anyone who is able to find the problem?

Link: http://pec.solarismedia.net/index.html#content

解决方案

Your datepickers have the class hasDatepicker, so try this:

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

I'm 99% positive that will work!

And FYI, if you want it to be dynamic (apply to inputs created after), you can use .on

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

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

To answer your comment, the following may not be the best solution, but through trial and error (on your site, using console) it works! And it's relatively short compared to alternate ways I thought of.

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

As One Line

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

the problem i encountered was being able to tell when the span icon was clicked, it wasnt really wanting to cooperate, thus the extra has class checks

这篇关于单击外部时 jQuery UI 日期选择器不会隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！