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

本文介绍了jQuery datepicker只能工作一次，第二次不显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

ASP.NET MVC3 / jQuery 1.9.1 / jQuery UI 1.10.2

我有一个页面，我打开一个模态对话框，点击一个 Ajax.ActionLink 。在此对话框中，我有一个输入字段和一个 datepicker 与之相关联。当我第一次打开对话框时，我可以点击datepicker按钮（或相关的输入字段内部，以便收到焦点， showOn 设置为 both ），并且datepicker按预期显示。我可以在模态对话框打开的时候按照我想要的方式进行，datepicker显示每次。当我关闭模态对话框（通过附加的 $（ui-widget-overlay）。点击（function（）{...}）; 然后打开它再次，datepicker不再工作，无论我是否尝试点击按钮或相关的输入字段。

我试图调试jQuery代码，运行代码行的次数是相同的（即使在第二次打开该对话框的时候，日期戳不会显示，jQuery方法被触发）从调试器中我可以看到，我完全失败了，并且此帖中描述的方法仅在显示日期选择器方面有所帮助第一次打开对话框。另一篇文章似乎只是与 showOn 设置的误区有关。

我也试图在关闭对话框时，通过 $（＃datepicker）。datepicker（destroy）; 破坏datepicker - 无效。任何想法？

更新

在调用页面上： p $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ b { autoOpen：false， modal：true， open：function（） { $（ui-widget-overlay）。 （） { $（＃popupDialog）对话框（关闭）; } } }）; }）; [...] @ Ajax.ActionLink（Some text，Action，Controller，new AjaxOptions { HttpMethod =GET， UpdateTargetId = popupDialog， InsertionMode = InsertionMode.Replace， OnSuccess =openPopup（）}） [...] 函数openPopup（） { $（popupDialog）。对话框（open）; } [...] < div id =popupDialogstyle =显示：none;>< / div>

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

public ActionResult Action（） { MyActionModel myActionModel = new MyActionModel（）; return PartialView（myActionModel）; }

解决方案

跟踪jQuery事件，我测试了jQuery UI 1.9.2是否存在问题，它没有。然后我比较了相关的 datepicker 代码行，这些代码行并没有涉及太多的实际变化。

简而言之，上面我的问题中描述的问题可以通过将单行代码从1.10.2更改为1.9.2中的代码来修复：

1.10.2导致问题

/ *初始化日期选择器* / if（！$ .datepicker.initialized）{ $（document）.mousedown（$。datepicker._checkExternalClick）; $ .datepicker.initialized = true; }

1.9.2。版本，按预期工作

/ *初始化日期选择器* / 如果（！$。 datepicker.initialized）{ $（document）.mousedown（$。datepicker._checkExternalClick） // !!!!!!!!!! //必须再次添加下一个代码行，以便在不重新启动 //基础页面的情况下弹出窗口多次打开时显示日期选择器 //。 // !!!!!!!!!! .find（document.body）.append（$。datepicker.dpDiv）; $ .datepicker.initialized = true; }

我仍然不知道为什么这种行为存在，但似乎是相对罕见的星座。作为注释：在打开弹出对话框（或请求 PartialView 通过后，我没有重新初始化 datepicker AJAX），所以将单个脚本源作为 _Layout.cshtml 的一部分就足够了。希望这有助于别人。

ASP.NET MVC3 / jQuery 1.9.1 / jQuery UI 1.10.2

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.

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.

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

Update

On the "calling page":

$(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 ); }

解决方案

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.

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 causing problems

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

1.9.2. version, working as expected

/* 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; }

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.