模式弹出窗口中的DateTimePicker在取消后不再显示

DateTimePicker in modal popup no longer shows after cancel

本文关键字：取消后 不再 显示 DateTimePicker 窗口 模式      更新时间：2023-09-26

我在模式弹出窗口中使用Trent Richardson制作的DateTimePicker插件来选择存档项目的日期。当模态弹出时，一切正常。在这个模式中，我有两个按钮：归档和取消。如果我选择一个日期并按Archive，一切都会很好，在下一个弹出窗口中，日期时间选择器也会很好。但是，如果我按下Cancel，下次使用弹出窗口时，日期时间选择器将不起作用。最奇怪的是，我有另一个弹出窗口来显示存档的项目，它也有一个日期时间选择器。如果我在任一弹出窗口中取消操作，则日期选择器将不会在两个弹出窗口中显示。

以下是初始化弹出窗口的代码javascript：

var modalBackground = $("#modalBackground");
var Notifications_ArchiveHolder = $("#Notifications_ArchiveHolder");
var Notifications_ShowArchivePopupHolder = $("#Notifications_ShowArchivePopupHolder");
var ArchiveURL = "@Url.Action("Archive")";
var ShowArchiveUrl = "@Url.Action("ShowArchive", "Notifications")";
function ArchivePopup() {        
    $.get(ArchiveURL, function (content) {
        if (Notifications_ArchiveHolder.html().length <= 10) {
            Notifications_ArchiveHolder.html(content);                
        }
    })
    InitArchivePopup();
}
function InitArchivePopup() {       
    modalBackground.show();
    //set up positon
    var h = $(window).height();
    var w = $(window).width();
    var hh = Notifications_ArchiveHolder.height();
    var hw = Notifications_ArchiveHolder.width();
    var posx = (h / 2) - 100;
    var posy = (w / 2) - 200;
    Notifications_ArchiveHolder.css("position", "fixed");
    Notifications_ArchiveHolder.css("top", posx);
    Notifications_ArchiveHolder.css("left", posy);                      
    Notifications_ArchiveHolder.show();
    $("body").css("overflow", "hidden");
}
function Cancel_Archive() {
    Notifications_ArchiveHolder.hide();
    Notifications_ArchiveHolder.html("");
    modalBackground.hide();
}

一个div用作背景，另一个用于主持弹出窗口：

<div id="modalBackground" class="graphicScreen" style="display: none; position: fixed;   top: 0px; left: 0px;"></div>
<div id="Notifications_ArchiveHolder" style="background-color: white; display: none; z-index: 9999;"></div>

弹出窗口中呈现的部分视图的代码：

<link rel="stylesheet" href="@Url.Content("~/Resources/styles/Notifications/NotificationsPage.css")" />
@using (@Html.BeginForm("Archive", "Notifications", FormMethod.Post))
{
<div class="popupTitle">
    Archive notifications
</div>
<div class="popupNotifications">
    <span>Archive to date (inclusive)</span>
    <input type="text" name="olderThan" id="chooseDate" />
</div>
<div style="margin: 15px">
    <input class="goVariant" type="submit" value="Archive" />
    <input id="cancelBtn" class="goVariant" type="button" value="Cancel" onclick="Cancel_Archive()" />
    @*<div class="tooltip_Holder" keyword="notif_admin_archive" onclick="showToolTip();"></div>*@
</div>
}
<link href="@Url.Content("~/Resources/styles/jquery-ui-timepicker-addon.css")"  rel="stylesheet" />
<script src="@Url.Content("~/Resources/JQuery/DateTimePicker/jquery-1.9.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Resources/JQuery/DateTimePicker/jquery-ui.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Resources/JQuery/DateTimePicker/jquery-ui-timepicker-addon.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Resources/JQuery/DateTimePicker/jquery-migrate-1.2.1.js")"></script>
<script>
$(document).ready(function () {
    $('#chooseDate').datetimepicker();
})
</script>

任何想法都将不胜感激。

请尝试使用以下代码。当你在modal上加载内容时，你需要使用live函数，这可以通过下面的代码来实现。

$('body').on('click','#chooseDate',function(){
    $(this).datetimepicker();
});

在彻底清理脚本文件（不再从局部视图传递它们）后，它进行了排序。

相关文章：