jQuery datepicker 只工作一次，第二次不显示 [英] jQuery datepicker only works once and is not shown the second time

问题描述

ASP.NET MVC3/jQuery 1.9.1/jQuery UI 1.10.2

ASP.NET MVC3 / jQuery 1.9.1 / jQuery UI 1.10.2

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

I've got a page on which I open a modal dialog after clicking on an Ajax.ActionLink. Inside this dialog I have an input field and a datepicker associated with it. When I open the dialog for the first time, I can click on the datepicker button (or inside the associated input field so it receives focus, showOn is set to both), and the datepicker shows as expected. I can, while the modal dialog is open, do it as often as I want to, the datepicker shows every time. When I close the modal dialog (via an attached $("ui-widget-overlay").click(function(){...}); and then open it again, the datepicker no longer works, no matter whether I try to click on the button or into the associated input field.

我尝试调试 jQuery 代码，并且两次运行的代码行都是相同的(即使第二次打开对话框时日期选择器没有出现，jQuery 方法也被触发)来自什么我可以在调试器中看到.我完全被难住了，这篇文章中描述的方法仅在以下方面有所帮助第一次打开对话框时显示日期选择器.另一篇文章似乎只与误解有关showOn 设置有效.

I tried to debug the jQuery code, and both times the lines of code being run are the same (and even though the datepicker doesn't show up the second time the dialog is opened, the jQuery methods are triggered) from what I can see in the debugger. I'm completely stumped, and the methods described in this post only helped in terms of being to show the datepicker the first time the dialog opens. Another post only seems to be related to a misunderstanding how the showOn setting works.

我还尝试在关闭对话框时通过 $("#datepicker").datepicker("destroy"); 销毁日期选择器 - 无济于事.有什么想法吗?

I also tried to destroy the datepicker via $("#datepicker").datepicker("destroy"); when closing the dialog - to no avail. Any ideas?

更新

在调用页面"上:

$(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>

控制器动作非常简单，如下:

The controller action is very simple and as follows:

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

推荐答案

经过多次调试并尝试跟踪 jQuery 事件后，我测试了 jQuery UI 1.9.2 是否存在该问题，而实际上并没有.然后我比较了相关的datepicker代码行，没有涉及太多实际更改.

After more debugging and attempts to trace jQuery events, I tested whether the problem existed with jQuery UI 1.9.2, which it didn't. Then I compared the relevant datepicker code lines which did not involved too many actual changes.

长话短说，可以通过将一行代码从 1.10.2 更改回 1.9.2 中的代码来解决我上面问题中描述的问题:

To put a long story short, the problem described in my question above could be fixed by changing a single line of code back from 1.10.2 to what it was in 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;
}

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

I'm still not sure why this behaviour exists, but it seems to be a relatively rare constellation. As a note: I didn't "reinitialize" the datepicker after opening the popup dialog (or requesting the PartialView via AJAX), so having a single script source as part of the _Layout.cshtml is sufficient. Hope this helps someone else.

这篇关于jQuery datepicker 只工作一次，第二次不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！