placement de datepicker() sur des éléments créés dynamiquement - JQuery/JQueryUI

Question

J'ai créé dynamiquement des zones de texte, et je veux que chacune d'elles puisse afficher un calendrier en cliquant. Le code que j'utilise est :

$(".datepicker_recurring_start" ).datepicker();

Ce qui ne fonctionnera que sur la première zone de texte, même si toutes mes zones de texte ont une classe appelée datepicker_recurring_start.

Votre aide est très appréciée !

Answer 1

Pour moi ci-dessous jquery a travaillé :

changer "body" en document

$(document).on('focus',".datepicker_recurring_start", function(){
    $(this).datepicker();
});

Merci à skafandri

Remarque : assurez-vous que votre identifiant est différent pour chaque champ

Answer 2

Excellente réponse de skafandri +1

Ceci est juste mis à jour pour vérifier la classe hasDatepicker.

$('body').on('focus',".datepicker", function(){

    if( $(this).hasClass('hasDatepicker') === false )  {
        $(this).datepicker();
    }

});

Answer 3

Assurez-vous que votre élément avec la classe .date-picker N'A PAS déjà une classe hasDatepicker. Si c'est le cas, même une tentative de réinitialisation avec $myDatepicker.datepicker(); échouera ! Au lieu de cela, vous devez faire...

$myDatepicker.removeClass('hasDatepicker').datepicker();

Answer 4

Vous devez exécuter à nouveau .datepicker(); après avoir créé dynamiquement les autres éléments de la zone de texte.

Je recommande de le faire dans la méthode de rappel de l'appel qui ajoute les éléments à la DOM.

Donc, disons que vous utilisez la méthode JQuery Load pour extraire les éléments d'une source et les charger dans le DOM, vous feriez quelque chose comme ceci :

$('#id_of_div_youre_dynamically_adding_to').load('ajax/get_textbox', function() {
  $(".datepicker_recurring_start" ).datepicker();
});