Reloaded Jquery UI datepicker ne fonctionne pas en mode inline

Question

J'ai chargé l'interface utilisateur datepicker en mode inline.So, je fais des boutons de remorquage pour le charger et l'enlever.Mais quand je le recharge à nouveau.Le datepicker montré mais ne peut pas sélectionner tout jour ou changer le mois, et firebug a signalé une erreur.

code juste simples: js:

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

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

et html:

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

Merci beaucoup !!

Ma 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'})); 

Answer 1

La raison pour laquelle cela se produit dans votre démo est parce que vous créez la variable panelContents1 et annexant dans le DOM, l'appel $('#loadDiv').empty(); est en train de détruire des éléments vitaux que les besoins datepicker . Plus tard, vous ajoutez même variable (ensemble d'éléments), c'est la racine de tous vos problèmes ici.

Comme solution, la création de la datepicker dans le gestionnaire click créerait un nouveau à chaque fois et ne pas avoir ce problème avec annexant un, comme maintenant brisé ceci:

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

You can test it out here. Fondamentalement, il suffit de créer un nouvel élément lors de l'ajout, pas un qui est affecté par les interactions DOM précédentes comme votre démo. Pour ceux qui font une double-prise au code ci-dessus, .html(jQueryObject) is a shortcut for .empty().append(jQueryObject).