如果从打开状态单击标签,jQuery datepicker将被打开

Question

我使用jQuery UI Datepicker插件,我发现如果插件打开并且用户单击标签元素设置焦点到datepicker绑定的字段,则模糊事件将触发,因此datepicker淡出.紧接着是焦点事件,将日期选择器淡入.但是,当模糊事件再次触发时,当输入字段失去焦点时,datepicker对话框保持打开状态.

我的标记非常基础:

<label>Select date <input type="text" id="datepicker" /></label>
<script type="text/javascript">$('#datepicker').datepicker(options);</script>

我通过在控制台中键入以下内容来重现jQuery UI Datepicker页面上的错误:

$('h2:first').html('<label for="datepicker">Datepicker</label>');

当datepicker打开时,尝试单击标题.

我想我可以删除datepickers的标签,禁用动画可能有所帮助,但我想保持这些功能提供的用户体验.任何人都可以帮我解决一下如何解决这个问题吗？

Answer 1

我遇到了与你完全相同的问题(事实上你的问题在谷歌搜索期间出现).

我相信问题出在您使用的jQueryUI版本与@ ShadowScripter的jsFiddle中显示的版本.我使用v1.8.17和v1.8.18遇到了这个问题,但是jsFiddle使用的是v1.8.16(它没有重现这个bug).这里有一个的jsfiddle这确实重现使用v1.8.18的bug.

所以我把v.18与v.16相提并论,做了一些代码交换并找到了罪魁祸首:

在Datepicker.prototype._hideDatepicker,postProcess()定义为:

v1.8.18:

var self = this;
var postProcess = function() {
    $.datepicker._tidyDialog(inst);
    self._curInst = null;
};

v1.8.16

var postProcess = function() {
    $.datepicker._tidyDialog(inst);
    this._curInst = null;
};

因此,当在打开时label单击时datepicker,this在第16节中postProcess()是HTMLDivElement 对象,而在第18节中,self是Datepicker对象._curInst是一个属性,Datepicker因此第16节中的代码分配_curInst给错误的对象(HTMLDivElement而不是Datepicker).这个错误在第18节中得到修复,但它引入了这个"卡住打开"的错误.

只需self._curInst = null;从v.18中删除即可修复"卡住打开"错误.我不确定这可能导致什么(如果有的话)副作用,但我在初始测试期间没有注意到任何问题,尽管您的结果可能会有所不同.