时间戳

首页 > 解决方案 > jQuery UI 对话框上的 Datepicker 在第二次打开对话框时失败

javascript - jQuery UI 对话框上的 Datepicker 在第二次打开对话框时失败

问题描述

我有一个带有链接的静态页面，该链接打开一个加载子页面的模式对话框。该子页面包含一个带有 Datepicker 小部件的输入。

当我第一次打开对话框时，子页面加载并且日期选择器出现并正常运行。

当我关闭 Dialog 并再次打开它时，子页面加载，但 Datepicker 没有出现，并且没有报告错误。我认为这可能是因为 Dialog 在关闭时会留下残余物，因此重新打开它会再次加载到子页面中，但 Datepicker 会忽略重复的实例。

对话框设置/调用很简单：

$("a#Popup").click(function() {
  var subpage = $("div#SubPage")
    .dialog({ autoOpen: false, width: 480, minHeight: 280, modal: true });
  var addr = $("a#Popup").attr('href');
  subpage.load(addr);
  subpage.dialog('open');
  return false;
});

有没有办法以正确的方式关闭对话框，以便将其干净地删除并且仍然可以再次打开？我尝试了destroy()，但对话框再次运行时出现问题。

我确实注意到，由于 Dialog 将其生成的代码放在我的页面form标签之后，我可以使用以下方法将其全部删除：

$("form").nextAll().remove();

所以我可能会在 Dialog 的close活动中尝试这样做，尽管它很hacky。

标签： javascriptjquery-uijquery-ui-datepickerjquery-ui-dialog

解决方案

jQuery 的 DatePicker 有一些奇怪的怪癖。Fit.UI（内部使用 jQuery 的 DatePicker）弥补了其中的一些缺陷，并在移动设备上提供原生体验，添加各种额外功能，并提供传统的面向对象 API。因此，如果您对不是“纯 jQuery”的解决方案感到满意，请考虑以下内容：https ://fitui.org/Control-DatePicker.html

（我有偏见 - 我使用 Fit.UI）

如果你想使用它，你应该在 npm 上安装更新的包，或者从 GitHub 下载最新版本。

推荐阅读