jQuery datepicker只能工作一次,第二次不显示

Question

ASP.NET MVC3/jQuery 1.9.1/jQuery UI 1.10.2

我有一个页面,我点击后打开一个模态对话框Ajax.ActionLink.在这个对话框中,我有一个输入字段并datepicker与之关联.当我第一次打开对话框时,我可以单击datepicker按钮(或在关联的输入字段内,以便它获得焦点,showOn设置为both),并且datepicker按预期显示.我可以,当模态对话框打开时,按照我想要的频率执行,每次都会显示日期选择器.当我关闭模态对话框时(通过附加$("ui-widget-overlay").click(function(){...});然后再次打开它,日期选择器不再有效,无论我是否尝试单击按钮或进入相关的输入字段.

我尝试调试jQuery代码,并且两次运行的代码行都相同(即使第二次打开对话框时没有出现datepicker,也会触发jQuery方法)在调试器中.我彻底难倒了,和中描述的方法这个帖子只有在被展示的日期选择在第一时间打开的对话框条款帮助.另一篇文章似乎只是与误解showOn设置如何运作有关.

我也试图$("#datepicker").datepicker("destroy");在关闭对话框时销毁日期选择器- 无济于事.有任何想法吗？

更新

在"呼叫页面":

$(document).ready(function () {
    $("#popupDialog").dialog(
    {
        autoOpen: false,
        modal: true,
        open: function()
        {
            $("ui-widget-overlay").click(function()
            {
                $("#popupDialog").dialog("close");
            }
        }
    });
});
[...]
@Ajax.ActionLink( "Some text", "Action", "Controller", new AjaxOptions {
    HttpMethod = "GET",
    UpdateTargetId = "popupDialog",
    InsertionMode = InsertionMode.Replace,
    OnSuccess = "openPopup()"
})
[...]
function openPopup()
{
    $("popupDialog").dialog("open");
}
[...]
<div id="popupDialog" style="display: none;"></div>

控制器动作非常简单,如下所示:

public ActionResult Action()
{
    MyActionModel myActionModel = new MyActionModel();
    return PartialView( myActionModel );
}

Answer 1

在进行了更多调试并尝试跟踪jQuery事件之后,我测试了jQuery UI 1.9.2是否存在问题,但事实并非如此.然后我比较了datepicker没有涉及太多实际变化的相关代码行.

总而言之,上面我的问题中描述的问题可以通过将一行代码从1.10.2更改为1.9.2中的内容来解决:

1.10.2造成问题

/* Initialise the date picker */
if (!$.datepicker.initialized) {
    $(document).mousedown($.datepicker._checkExternalClick);
    $.datepicker.initialized = true;
}

1.9.2.版本,按预期工作

/* Initialise the date picker */
if (!$.datepicker.initialized) {
    $(document).mousedown($.datepicker._checkExternalClick)
        // !!!!!!!!!!
        // The next code line has to be added again so that the date picker
        // shows up when the popup is opened more than once without reloading
        // the "base" page.
        // !!!!!!!!!!
        .find(document.body).append($.datepicker.dpDiv);
    $.datepicker.initialized = true;
}

我仍然不确定为什么这种行为存在,但它似乎是一个相对罕见的星座.注意:datepicker在打开弹出对话框(或请求PartialView通过AJAX)之后,我没有"重新初始化" ,因此将单个脚本源作为其中一部分_Layout.cshtml就足够了.希望这有助于其他人.

Answer 2

我有同样的问题,我解决了

$("#ui-datepicker-div").remove();

关闭并销毁弹出窗口后.

Answer 3

对我有用的是 -

在对话框内,如果我有多个带类的输入datepicker,那么

$(".datepicker").removeClass('hasDatepicker').datepicker();  

基本上,hasDatepicker在datepicker再次初始化之前删除类.

我在jquery.ui.datepicker的1.8.18 版本上