简体   繁体   中英

Reloaded Jquery UI datepicker doesn't work in inline mode

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM