jQuery UI datepicker在外部点击时不会隐藏 [英] jQuery UI datepicker doesn't hide when click outside

问题描述

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

当我点击输入时，它会正确显示一个日期选择器。
然而，当我没有选择任何日期，我只是单击元素外面，它不会隐藏datepicker，因为我期望的。

当我按Esc时，它会消失，当我选择一天它消失，但当我点击外面，它停留在那里。

有没有人能够找到问题？

提前感谢：）

链接： http://bit.ly/SFeuzp

解决方案

你的datepickers有 hasDatepicker ，所以请尝试：

  $（。hasDatepicker ）.blur（function（e）{$（this）.datepicker（hide）;}）; 
  

我99％的积极性将会奏效！

&p和FYI，如果你想要它是动态的（适用于以后创建的输入），可以使用.on

  $（。hasDatepicker）。on（blur，function（e）{$（this）.datepicker（hide）;}）; 
  

更新 ^{（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 -datepicker）&！ele.hasClass（ui-icon）&！$（ele）.parent（）。parents（。ui-datepicker）。length）$（。hasDatepicker ）.datepicker（hide）;}）; 
  

我遇到的问题是能够告诉跨度图标何时被点击，它真的不想合作，因此额外的有类检查

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?

Thanks in advance :)

Link: http://bit.ly/SFeuzp

解决方案

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 datepicker在外部点击时不会隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！