duplication du sélecteur de date jQuery

Question

Le datepicker La fonction ne fonctionne que sur la première zone de saisie créée.

J'essaie de dupliquer un sélecteur de date en clonant le div qui le contient.

<a href="#" id="dupMe">click</a>
<div id="template">
  input-text <input type="text" value="text1" id="txt" />
  date time picker <input type="text" id="example" value="(add date)" />
</div>

Pour initialiser le sélecteur de date, selon le Documentation de l'interface utilisateur jQuery je n'ai qu'à faire $('#example').datepicker(); et cela fonctionne, mais uniquement sur le premier sélecteur de date créé.

Le code pour dupliquer le div est le suivant:

$("a#dupMe").click(function(event){
  event.preventDefault();
  i++;
  var a = $("#template")
            .clone(true)
            .insertBefore("#template")
            .hide()
            .fadeIn(1000);
  a.find("input#txt").attr('value', i);
  a.find("input#example").datepicker();
});

Le plus étrange, c'est que sur le document.ready J'ai:

$('#template #example').datepicker();
$("#template #txt").click(function() { alert($(this).val()); });

et si je clique sur le #txt ça marche toujours.

Answer 1

Je recommanderais également d'utiliser simplement un nom de classe commun.Cependant, si vous êtes contre cela pour une raison quelconque, vous pouvez également écrire une fonction pour créer des sélecteurs de date pour toutes les zones de texte de votre modèle. div (à appeler après chaque duplication).Quelque chose comme:

function makeDatePickers() {
  $("#template input[type=text]").datepicker();
}

Answer 2

J'utilise plutôt une classe CSS :

<input type="text" id="BeginDate" class="calendar" />
<input type="text" id="EndDate" class="calendar" />

Ensuite, dans votre document.ready fonction:

$('.calendar').datepicker();

L'utiliser de cette façon pour plusieurs champs de calendrier fonctionne pour moi.

Answer 3

J'ai eu un problème très similaire et après des heures de tests, j'ai trouvé une solution.Je copiais un bloc de code HTML et l'insérais après une section contenant déjà un calendrier de sélection de dates jQuery.Ce que je n'ai pas réalisé au début, c'est que le calendrier jQuery UI modifie la classe de l'élément lors de l'exécution du .datepicker() fonction.Le résultat est que lorsque vous essayez de copier le code et de lancer une nouvelle instance du calendrier pour cette nouvelle section, cela échoue car, selon le CSS, il y en a déjà une.Si vous essayez d'utiliser .datepicker('destroy') cela ne parvient pas à détruire cette instance fantôme car elle n'existe pas réellement.J'ai résolu le problème en réinitialisant la classe de l'élément sélecteur de date dans mon code HTML, puis en ajoutant le sélecteur de date à cet élément...

Ci-dessous le code que j'utilisais.J'espère que cela fera gagner du temps à quelqu'un d'autre...

$('#addaddress').click(function() {
  var count = $('.address_template').size();
  var html = $('.address_template').eq(0).html();
  $('#addaddress').before('<div class="address_template">' + html + '</div>');
  $('.address_template H1').eq(count).html("Previous Address " + count);
  $('.address_date').eq(count).attr("class","address_date");
  $('.address_date').eq(count).attr("id","movein" + count);
  $("#movein" + count).datepicker();
});

Answer 4

Le code HTML que je clone a plusieurs entrées de sélecteur de date.

En utilisant la réponse de Ryan Stemkoski et le commentaire d'Alex King, j'ai trouvé cette solution :

var clonedObject = this.el.find('.jLo:last-child')
clonedObject.find('input.ui-datepicker').each(function(index, element) {
    $(element).removeClass('hasDatepicker');
    $(element).datepicker();
});
clonedObject.appendTo('.jLo');

Merci à tous.