单击外部时,jQuery UI datepicker不会隐藏

Question

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

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

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

有没有人能够找到问题？

提前致谢 :)

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

Answer 1

你的datepickers有这个类hasDatepicker,所以试试这个:

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

我99%肯定会起作用!

而且,仅供参考,如果您希望它是动态的(适用于之后创建的输入),您可以使用.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("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"); });

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

Answer 2

我稍微修改了@SaraVanaN的代码,它看起来像这样:

$(document).on("click", function(e) {
    var elem = $(e.target);
    if(!elem.hasClass("hasDatepicker") && 
        !elem.hasClass("ui-datepicker") && 
        !elem.hasClass("ui-icon") && 
        !elem.hasClass("ui-datepicker-next") && 
        !elem.hasClass("ui-datepicker-prev") && 
        !$(elem).parents(".ui-datepicker").length){
            $('.hasDatepicker').datepicker('hide');
    }
});

我改变了这一行,$(document).on("click", function(e) {但是你不管怎么做,.on("click")或者我 为我工作的.click() 这条线,你应该重新检查你的网页日期选择器,因为现在,对我来说,当你点击弹出的日期日期立即关闭,你不能选择任何日期......!$(elem).parents(".ui-datepicker").length.parent()div