我遇到了一个非常奇怪的问题。我有一个使用 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 库的情况下工作,但我遇到了同样的问题。
提前致谢。
最佳答案
您将重新更新 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/
关于javascript - Jquery UI Datepicker 注销和登录后不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19906232/