重新加载的 Jquery UI 日期选择器在内联模式下不起作用答案

【问题标题】：Reloaded Jquery UI datepicker doesn't work in inline mode重新加载的 Jquery UI 日期选择器在内联模式下不起作用
【发布时间】：2011-05-09 09:34:53
【问题描述】：

我以内联模式加载了 UI 日期选择器。因此，我制作了两个按钮来加载和删除它。但是当我再次重新加载它时。日期选择器显示但无法选择任何日期或更改月份，并且 firebug 报告错误。

只是简单的代码： js：

var panelContents1 = $('<div />',{'id':'igto1_WH'}).append($('<div />',{'id':'igto1_whDatePicker'}).datepicker());

$('#load').click(function(){ $('#loadDiv').html(panelContents1); }) 
$('#empty').click(function(){ $('#loadDiv').empty(); })

和html：

<p id="load"> load </p>
<p id="empty"> empty </p>
<div id="loadDiv"></div>

非常感谢！！

我自己的解决方案：

 $('#load').click(function(){
    $('#loadDiv').html(panelContents1).find('#igto1_whDatePicker').datepicker();

        })

 $('#empty').click(function(){
          $('#igto1_whDatePicker').datepicker('destroy');
    $('#loadDiv').empty();
         })

 var panelContents1 = $('<div />',{'id':'igto1_WH'}).append($('<div />',{'id':'igto1_whDatePicker'}));

【问题讨论】：

您需要多个日期选择器还是始终只有一个可见？

标签： jquery jquery-ui user-interface datepicker jquery-ui-datepicker

【解决方案1】：

在您的演示中发生这种情况的原因是因为您正在创建变量 panelContents1 并将其附加到 DOM 中，然后 $('#loadDiv').empty(); 调用正在破坏日期选择器所需的重要元素。稍后您将附加该 same 变量（元素集），这是您所有问题的根源。

作为一种修复，在 click 处理程序中创建日期选择器每次都会创建一个新的，并且不会出现附加一个现已损坏的日期选择器的问题，如下所示：

$('#load').click(function(){ 
    var panelContents1 = $('<div />',{'id':'igto1_WH'}).append($('<div />',{'id':'igto1_whDatePicker'}).datepicker());
    $('#loadDiv').html(panelContents1); 
});

You can test it out here。基本上只是在追加时创建一个新元素，而不是像您的演示那样受以前的 DOM 交互影响的元素。对于那些对上面的代码进行双重检查的人，.html(jQueryObject) is a shortcut for .empty().append(jQueryObject)。

【讨论】：