使用 ajax 请求（$.load）第二次加载页面时，jQuery Datepicker 不起作用答案

【问题标题】：jQuery Datepicker does not work when loading a page for second time with ajax request ($.load)使用 ajax 请求（$.load）第二次加载页面时，jQuery Datepicker 不起作用
【发布时间】：2014-03-05 11:05:07
【问题描述】：

首先，我使用 asp.net，但对于这种情况并不重要，因为我不使用 asp 元素，只使用基本的 html 元素和 jQuery。

我在我的 default.aspx 页面中的函数 loadDatepicker 中初始化了一个 jQuery 日期选择器。这个页面有一个按钮元素，它调用函数loadWorkSpace，它使用$.load方法加载一个表单页面（称为form.aspx），它使用一个日期选择器，这个页面被加载到default.aspx页面的特定div元素中.

<script type="text/javascript" charset="utf-8">
    function loadDatepicker() {
         $.getScript("/resources/js/jquery-ui-1.10.4.custom.js").done(
                            function () {
                                $(".datepicker").datepicker({
                                    showOn: "button",
                                    buttonImage: "/resources/img/calendar.png",
                                    buttonImageOnly: true,
                                    buttonText: "",
                                }).attr("readonly", "true");
                                $(".datepicker").datepicker("setDate", "today");
                                $(".datepicker").datepicker("option", "firstDay", 1)
                                $(".datepicker").datepicker("option", "dateFormat", "dd/mm/yy");
                                $(".datepicker").datepicker("option", "monthNames", ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]);
                                $(".datepicker").datepicker("option", "monthNamesShort", ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"]);
                                $(".datepicker").datepicker("option", "dayNames", ["Domingo", "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado"]);
                                $(".datepicker").datepicker("option", "dayNamesMin", ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"]);
                            }
         );
     }
</script>

<script type="text/javascript" charset="utf-8">
    function loadWorkSpace(pagina) {
        $("#workSpace").load(pagina, function () { loadDatepicker() });
        return false;
    }
</script>

问题是，当我单击按钮并调用函数 loadWorkSpace 时，当我单击图标触发器时，日期选择器第一次工作！但是第二次单击按钮时，日期选择器会在输入元素中显示我在日期选择器的选项“setDate”中输入的默认值，它的格式正确，但是当我单击图标触发器以显示日期选择器时，确实如此不行……

谁能告诉我我的错误？谢谢。

【问题讨论】：

标签： javascript jquery asp.net ajax datepicker

【解决方案1】：

这是因为当您重新加载 HTML 时，您的 DOM 元素是没有分配事件的新元素。

您需要重新分配事件或使用on 或live 之类的内容。

当然，这可能意味着您首先需要对用于设置事件的任何脚本进行一些修改！

这就是我喜欢编写自己的 jQuery 控件的原因。

【讨论】：