jQuery datepicker只能工作一次，第二次不显示
ASP.NET MVC3 / jQuery 1.9.1 / jQuery UI 1.10.2
我有一个页面，在单击Ajax.ActionLink后打开modal dialog。 在这个对话框中，我有一个输入字段和一个与之关联的datepicker 。 当我第一次打开对话框时，我可以单击datepicker按钮（或在关联的输入字段内，以便它获得焦点， showOn设置为both ），并且showOn按预期显示。 我可以，当modal dialog打开时，按照我想要的频率执行，每次都会显示日期选择器。 当我关闭modal dialog时（通过附加的$("ui-widget-overlay").click(function(){...});然后再次打开它，无论我是否尝试，datepicker都不再有效单击按钮或关联的输入字段。
我尝试调试jQuery代码，并且两次运行的代码行都是相同的（即使第二次打开对话框时没有出现datepicker，也会触发jQuery方法）在调试器中。 我完全被难倒了，本文中描述的方法仅在第一次打开对话框时显示日期选择器方面有所帮助。 另一篇文章似乎只是误解了showOn设置是如何工作的。
我还试图通过$("#datepicker").datepicker("destroy");来破坏日期$("#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"); } [...]
控制器动作非常简单，如下所示：
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造成问题
/* 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一部分就足够了。 希望这有助于其他人。
我有同样的问题，我解决了
$("#ui-datepicker-div").remove();
关闭并销毁弹出窗口后。
对我有用的是 –
在对话框内，如果我有多个带有类datepicker输入，那么
$(".datepicker").removeClass('hasDatepicker').datepicker();
基本上，在再次初始化hasDatepicker之前删除类hasDatepicker 。
我在jquery.ui.datepicker的1.8.18 版本上
它通过Ajax.ActionLink打开，它通过UpdateTargetId属性更新目标id（div）。 返回modal dialog内容的控制器操作查询Web服务，然后返回带有填充模型的局部视图。
然后你需要在填充部分视图后再次调用datepciker函数…在ajax的回调函数内（如果你正在使用它）…
$.ajax({ success:function(){ //your stuff $("#datepicker").datepicker(); } });
datepikcker将无法为动态添加的元素调用函数…因为在首次调用datepicker时你的目标div不存在…你需要再次调用datepicker函数，以便if工作添加目标DIV
更新
OnSuccess = "openPopup()" ..... function openPopup(){ //your codes $("#datepicker").datepicker(); //call date picker function to the added element again }
我有一个类似的问题，但发生在我身上的是第二次加载对话框时，数据贴图没有取值。
问题是我第二次加载对话框并导致问题。 解决方案是关闭它后删除对话框，如：
$("#popupDialog").dialog("close"); $("#popupDialog").remove();
我希望这可以帮助任何人！
您可以通过向div onclick =“focusBlur（）”添加一个新函数来完成此操作
我希望在模态关闭后重新启动日期选择器，因为在第一次试验期间选择的值设置日期仍然存在。 所以我不知道为什么，但以下代码对我不起作用。
$(selector).datepicker("refresh")
文档中提到的上述行没有帮助！
以下是我尝试过的东西，即破坏和重新启动日期选择器对象。
$('#addPromoModal').on('hide.bs.modal', function(event) { $("#startDate").datepicker("destroy"); $("endDate").datepicker("destroy"); initialiseDataPicker(); }
这是我的初始化函数：
function initialiseDataPicker(){ $( "#startDate" ).datepicker({ defaultDate: "+1w", showWeek: true, firstDay: 1, changeMonth: true, // numberOfMonths: 3, onClose: function( selectedDate ) { $( "#endDate" ).datepicker( "option", "minDate", selectedDate ); } }); $( "#endDate" ).datepicker({ defaultDate: "+1w", showWeek: true, firstDay: 1, changeMonth: true, // numberOfMonths: 3, onClose: function( selectedDate ) { $( "#startDate" ).datepicker( "option", "maxDate", selectedDate ); } }); }
希望有所帮助！ RA
顺便说一句，我会尝试解释我解决它的方式，因为我认为这样更容易。
我不是这方面的专家，所以如果我不使用正确的术语来解释它，请原谅我。
如果你在同一页面中有2个位置你想加载datepicker，你必须复制该函数：
$(function() { $( "#datepicker" ).datepicker({ showOn: "button", buttonImage: "images/calendar.png", buttonImageOnly: true, buttonText: "Select date", addClass:".ccCFcalV2" }); }); $(function() { $( "#datepicker2" ).datepicker({ showOn: "button", buttonImage: "images/calendar.png", buttonImageOnly: true, buttonText: "Select date", addClass:".ccCFcalV2" }); });
并将类“datepicker2”添加到您想要调用datepicker的第二个位置。 它几乎适合我
希望它可以帮助某人，如果你认为这是一个愚蠢的解决方案，让我知道，我会删除它
祝你今天愉快！