如果从打开状态单击标签，则 jQuery datepicker 将保持打开状态

Question

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

我的标记非常基础：

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

我通过在控制台中输入以下内容重现了the jQuery UI Datepicker page 上的错误：

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

当日期选择器打开时，尝试点击标题。

我想我可以删除日期选择器的标签，禁用动画可能会有所帮助，但我想保持这些功能提供的用户体验。任何人都可以帮助我解决这个问题吗？

Answer 1

我遇到了和你完全相同的问题（事实上你的问题是在我搜索时出现的）。

我相信问题出在您使用的 jQueryUI 版本与 @ShadowScripter 的 jsFiddle 中显示的版本之间。我在使用 v1.8.17 和 v1.8.18 时遇到了这个问题，但是 jsFiddle 使用的是 v1.8.16（它不会重现错误）。这是一个jsFiddle，它确实使用 v1.8.18 重现了该错误。

所以我将 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;
};

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

只需从 v.18 中删除 self._curInst = null; 即可修复“卡住”错误。我不确定这可能会导致什么（如果有的话）副作用，但我在初始测试期间没有发现任何问题，尽管您的结果可能会有所不同。

Answer 2

这已在 Jquery UI v1.8.19 中修复

Answer 3

嗯，我似乎无法重现您的问题。
当我在this JSFiddle 中尝试时，焦点仍然在输入上。
在任何情况下，标签的正确 html 标记不是将整个输入包含在标签内。
这就是for 属性的用途。

改为这样做

<label for="datepicker">Select date</label><input type="text" id="datepicker" />

这里有一些关于label attribute for的信息

奇怪的是，您自己的代码可能会干扰。例如，如果您在某处使用 return 语句来停止对该特定元素的传播。 你可以阅读更多关于here的信息。