javascript - Jquery UI Datepicker 注销和登录后不显示

Question

我遇到了一个非常奇怪的问题。我有一个使用 jquery-ui 日期选择器的输入:

$("#newDate", $container).datepicker();

此输入位于 SPI(单页界面)应用程序中，需要登录才能使用。每个内容都是通过AJAX加载的。

该组件工作正常，但如果我注销并登录到我的应用程序并单击我的日期选择器，则不会显示该组件。我的意思是，该操作不显示任何日历。

我尝试了很多类似这样的事情，但都没有成功: Jquery UI Datepicker not displaying

我注意到，当一切正常时，在“body”中添加了这个容器:

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">

但是当它不起作用时，这个容器就不会被加载。

下面显示了我使用此组件的代码的三个示例:

第一:

$("#fecha", $contenedor).datepicker();
$("#fecha", $contenedor).click(function(){
    if($("#fecha", $contenedor).val() == ''){
        $("#fecha", $contenedor).datepicker('setDate', (new Date()) );
    }
});

在此示例中，日期已加载到输入中，但未显示日期选择器组件。我尝试使用 show() 函数，但得到了相同的结果。

第二:

$("#fechaFinEventoDate", $dialogEditarEvento)
.datepicker({
    onClose: function (selectedDate) {                              
        $("#fechaInicioEventoDate", $dialogEditarEvento)
        .datepicker("option", "maxDate", selectedDate);
    }
}).val($.datepicker.formatDate('dd/mm/yy', fechaFin)); 

$("#fechaFinEventoDate", $dialogEditarEvento)
.datepicker(
    "option", "minDate", $.datepicker.formatDate('dd/mm/yy', fechaInicio)
);

第三:

$("#fechaInicioEventoTime", $dialogEditarEvento).timepicker({
    timeFormat: 'HH:mm',
    showSecond: false
}).val(getFormatTime(fechaInicio));

我已经使用了这个库，并且按照显示的顺序加载它们:

jquery-1.10.2.min.js,
jquery-ui-1.9.2.custom.js,
jquery.ui.datetimepicker.js (http://trentrichardson.com/examples/timepicker/)

我尝试在没有 datetimepicker 库的情况下工作，但我遇到了同样的问题。

提前致谢。

Answer 1

您将重新更新 HTML，因此每次使用单屏应用程序登录/注销时都会更新一个新的 DOM。 jQuery 只会使用当前选择器查找 DOM 的首次加载实例。调整它们以每次查找新附加的(容器)DOM 元素。

正在申请.datepicker()到动态分配的<div>

var $datePickerEl = $(document).find('#fecha', $contenedor );
$(document).on('click', "#fecha", function(){
    if( $datePickerEl.val() == ''){
        $datePickerEl.datepicker('setDate', (new Date()));
    }
});

重新分配 .datepicker()到相同的动态创建的 DOM 元素

按照您在 fiddle 中提供的示例，它用一页信息重新加载了 DOM 的内容，带来了一个问题，即它没有重新启动 .datepicker()按预期初始化。

因为新的.html()重新加载会清除所有 .datepicker()辅助 CSS & <div> s，但是为该元素分配了新的 ID。通过简单地将内容附加到容器，而不是整个文档并删除 datepicker() 的先前实例中保留的 ID 和类的任何实例。下面的示例代码成功创建了一个新的 .datepicker()按需。

<div id="content"></div>

<script>
    function loadLogin() {
          $('#content').html('<div id="pp">'+ 
                                '<button id="login">Free login</button>'+
                             '</div>').trigger("create");
          loadEvents();
    }

    function loadEvents() {

        $div = $('<h1>Hi!!</h1>' +
            '<input type="text" class="datepick" />' +
            '<button id="logout" style="margin-top: 100px;">Good bye!</button>');

        $("#pp").html($div).trigger("create");

        /** 
         *  Find the newly appended .datepick
         *  && begin the .datepicker init.
        **/
        $datepicker = $(document).find('.datepick');
        $datepicker.datepicker();

        $('#logout').click(function () {
            //Remove the attached id && class.
            $datepicker.removeAttr('id').removeClass('hasDatepicker');
            loadLogin();
        });
    }
</script>

演示 fiddle :http://jsfiddle.net/zP9L6/1/