模态框关闭重开后jQuery Datepicker无法更新日期问题排查

问题症状 #

模态表单通过局部视图加载，首次打开时日期选择器正常工作，第二次打开后修改日期无反应，控制台无报错。

核心原因 #

1. 多版本jQuery/jQuery UI冲突：页面同时加载了多个版本的jQuery（本地3.2.1 + CDN3.6.0）和两套jQuery UI（CDN1.13.1 + 本地1.12.1），全局jQuery对象被覆盖，导致Datepicker绑定逻辑失效。
2. Datepicker实例未正确销毁/重建：每次加载新的局部视图后，未销毁旧的Datepicker实例，直接绑定新实例时出现冲突。
3. 初始化时机错误：Datepicker初始化逻辑没有在AJAX加载完成后针对新DOM元素执行。

解决方案 #

1. 清理重复的脚本引用 #

删除重复的jQuery和jQuery UI库，统一使用一套版本，建议保留CDN的新版本以保证兼容性：

<!--   Core JS Files   -->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="~/Atlantis Theme/js/core/popper.min.js"></script>
<script src="~/Atlantis Theme/js/core/bootstrap.min.js"></script>

<!-- Date Picker & jQuery UI -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script src="~/Atlantis Theme/js/plugin/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>

<!-- 其余保留的插件脚本 -->
<script src="~/Atlantis Theme/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<script src="~/Atlantis Theme/js/plugin/chart.js/chart.min.js"></script>
<script src="~/Atlantis Theme/js/plugin/jquery.sparkline/jquery.sparkline.min.js"></script>
<script src="~/Atlantis Theme/js/plugin/chart-circle/circles.min.js"></script>
<script src="~/Atlantis Theme/js/plugin/datatables/datatables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="~/Atlantis Theme/js/plugin/jqvmap/jquery.vmap.min.js"></script>
<script src="~/Atlantis Theme/js/plugin/jqvmap/maps/jquery.vmap.world.js"></script>
<script src="~/Atlantis Theme/js/plugin/sweetalert/sweetalert.min.js"></script>
<script src="~/Atlantis Theme/js/atlantis.min.js"></script>

2. 修正AJAX回调中的Datepicker初始化逻辑 #

在每次加载新的局部视图后，先销毁旧的Datepicker实例，再给新的DOM元素绑定：

var Edit = function (id) {
    $.ajax({
        type: "GET",
        url: "/Exposure/Edit",
        data: { Id: id},
        success: function (response) {
            // 销毁旧的Datepicker实例（如果存在）
            $("#birth").datepicker("destroy");
            // 更新模态框内容
            $("#myModalBodydiv").html(response);
            // 给新的日期输入框绑定Datepicker
            $("#birth").datepicker();
            // 显示模态框
            $('#myModalForm').modal({ backdrop: 'static', keyboard: false }).modal("show");
            $("#myModalForm").appendTo("body");
        }
    })
}

3. 检查局部视图脚本 #

确保_partialViewEdit.cshtml中没有重复加载jQuery或Datepicker相关脚本，避免每次加载局部视图都重复引入库文件。

4. 可选：增加元素存在性校验 #

为了避免找不到元素的情况，初始化前可以先检查元素是否存在：

success: function (response) {
    $("#myModalBodydiv").html(response);
    var $birthInput = $("#birth");
    if ($birthInput.length > 0) {
        $birthInput.datepicker("destroy").datepicker();
    }
    $('#myModalForm').modal({ backdrop: 'static', keyboard: false }).modal("show");
    $("#myModalForm").appendTo("body");
}

内容的提问来源于stack exchange，提问作者Veck