如果从打开状态点击标签，jQuery datepicker被打开

我使用jQuery UI Datepicker插件，我发现如果插件是打开的并且用户单击标签元素将焦点设置为datepicker绑定到的字段，模糊事件激发，因此日期选择器淡出。紧接着是焦点事件，将日期选择器重新淡入。但是，当blur事件再次触发时，当输入字段失去焦点时，日期选择器对话框保持打开状态。如果从打开状态点击标签，jQuery 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>');

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

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

来源

2012-02-24 Jørgen

我和你有完全相同的问题（实际上你的问题在我的谷歌搜索过程中出现）。

我相信问题出在您正在使用的jQueryUI版本与@ ShadowScripter的jsFiddle中显示的内容。我遇到了这个问题，使用v1.8.17和v1.8.18，但jsFiddle使用v1.8.16（它不会重现该错误）。这里有一个jsFiddle，它使用v1.8.18重现了这个bug。

所以我显示差异V.18对第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被打开，在第16版的postProcess()是HTMLDivElement对象，而在v。18，self是Datepicker对象。 _curInst是Datepicker的一个属性，因此第16页中的代码将_curInst分配给错误的对象（HTMLDivElement而不是Datepicker）。这个错误在v.18中得到修复，但是它引入了这个“卡住”的错误。

简单地从v.18中删除self._curInst = null;修复了“卡住的开放”错误。我不确定这可能会导致什么副作用，但是在最初的测试中我没有注意到任何问题，尽管您的结果可能会有所不同。

来源

2012-03-02 15:57:47 dgilland

好极了= D非常感谢！我会在星期一进行检查。 – 2012-03-03 10:16:15

我使用1.8.17，并且从'self._tidyDialog'改为'this._dydyDialog'解决了它。谢谢一堆！ – 2012-03-05 11:20:46

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

做到这一点，而不是

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

以下是关于label attribute for

赔率是一些信息，可能会有一些自己的代码干扰。例如，如果您在某处使用了返回语句来阻止该特定元素的传播。你可以阅读更多关于here。

来源

2012-02-24 09:24:46 ShadowScripter

谢谢:)我可以看到它的作品在你的jsfiddle！但是，标签中的换行输入是有效的，如果您想要避免每个元素上的ID，那么这是必要的。请注意，我通过在http://jqueryui.com/demos/datepicker/上使用控制台添加带有for属性的标签来重现错误，但有趣的是它在最小的示例中起作用。 – 2012-02-24 10:56:08

@JørgenOops，在阅读完一些资料后，我可以看到两个标记都是有效的，我的不好。我想我习惯这样做。如果不能重现问题，人们只能猜测你的目标是干扰其他事情。：P – ShadowScripter 2012-02-24 11:03:23

没问题:)我不知道它是否与时间有关。如果我自己找到解决方案，我会在这里回复。同时我希望别人关心分享一些经验。 – 2012-02-24 11:17:31

这是固定在jquery用户界面v1.8.19

来源

2012-04-25 13:59:48

如果从打开状态点击标签，jQuery datepicker被打开

回答

相关问题