1

我有一个非常奇怪的问题。我有一个使用 jquery-ui datepicker 的输入：

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

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

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

我尝试了很多这样的事情都没有成功： Jquery UI Datepicker not displayed

我注意到当一切正常时，在“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 库的情况下工作，但我遇到了同样的问题。

提前致谢。

4

1 回答 1

0

您正在重新更新您的 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>

演示小提琴：http: //jsfiddle.net/zP9L6/1/

于 2013-11-11T12:42:17.713 回答