Question

我在内联模式中加载了UI日期选择器。所以，我将两个按钮加载并删除它。但是当我再次重新加载它时。日期选择器显示但不能选择任何一天或更改月份，并且firebug报告错误。< / p>

只是简单的代码： 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'}));

Answer 1

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

作为修复，在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)。

重新加载的Jquery UI datepicker在内联模式下不起作用

1 个答案: