I loaded UI datepicker in inline mode.So,I make tow buttons to load and remove it.But when I reload it again.The datepicker showed but can't select any day or change month, and firebug reported error.
just simple code: js:
var panelContents1 = $('<div />',{'id':'igto1_WH'}).append($('<div />',{'id':'igto1_whDatePicker'}).datepicker());
$('#load').click(function(){ $('#loadDiv').html(panelContents1); })
$('#empty').click(function(){ $('#loadDiv').empty(); })
and html:
<p id="load"> load </p>
<p id="empty"> empty </p>
<div id="loadDiv"></div>
Thank you very much!!
My own solution:
$('#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'}));
The reason this happens in your demo is because you're creating the variable panelContents1
and appending it into the DOM, then the $('#loadDiv').empty();
call is destroying vital elements that the datepicker needs. Later you're appending that same variable (set of elements), that's the root of all your issues here.
As a fix, creating the datepicker inside the click
handler would create a new one each time and not have this issue with appending a now-broken one, like this:
$('#load').click(function(){
var panelContents1 = $('<div />',{'id':'igto1_WH'}).append($('<div />',{'id':'igto1_whDatePicker'}).datepicker());
$('#loadDiv').html(panelContents1);
});
You can test it out here . Basically just create a new element when appending, not one that's affected by previous DOM interactions like your demo. For those doing a double-take at the code above, .html(jQueryObject)
is a shortcut for .empty().append(jQueryObject)
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.