Pourquoi le sélecteur de dates de jQuery UI rompt-il avec un DOM dynamique?

Question

Je travaille avec un DOM dynamique ici et j'ai appelé le sélecteur de date jQuery UI à toutes les entrées avec un nom de classe spécifique, dans ce cas .date

Cela fonctionne très bien avec la première construction statique, mais quand je la clone, les gestionnaires d'événements ne semblent pas vouloir se déplacer. J'obtiens l'erreur Firebug:

inst n'est pas défini

J'ai essayé d'examiner la nouvelle fonction live() jQuery mais je n'ai pas pu combiner les deux. Des idées?

Answer 1

Ah, a obtenu. Juste après que j'ai ajouter le code HTML pour les DOM-je exécuter cette opération sur toutes les entrées, j'aimerais avoir un datepicker pop up avec. Datepicker ajoute une classe d'éléments, il a été attaché, donc on peut filtrer les entrées et les appliquer uniquement aux nouveaux.

$('.date').not('.hasDatePicker').datepicker();

J'espère que cela aide les gens comme je l'ai été Googler pour les jours et ne trouve rien!

Vous devriez noter également qu'il serait plus rapide pour vérifier input.date dans le nouveau code HTML généré par la définition qu'en tant que contexte, plutôt que de l'ensemble de la page, cela vous fera gagner du temps, en raison de ce être une manière plus efficace.

Answer 2

J'ai eu un Problème similaire, j'ai eu plusieurs tables sur une page et chacun avait plusieurs datepickers, également sur cliquez sur le bouton "AddLine" il a ajouté une ligne de tableau avec le HTML dynamique et datepicker.

J'ai réalisé après beaucoup de recherche qui ma date d'entrée champs n'avaient pas de "id" sont définis, ils ressemblaient à ça

<input type="text" class="datepicker" name="mDate1" value="" size=8 >

jquery a été pointant tous les champs de date les valeurs de la première date de champ est défini dans la page, le calendrier serait popup sur tous les champs de date, mais la valeur de la 1ère date de champ de changement, j'ai fait un changement pour le html comme ceci

<input type="text" class="datepicker" id="Date1" name="mDate1" value="" size=8 >

par l'ajout d'un "id" et il a commencé à travailler, pour la dynamique des champs de date je change l'Id comme ceci

var allColumns = $("#"+$tableId+" tr:last td"); 
		$(allColumns).each(function (i,val) {
			if($(val).find(":input").hasClass("datepicker")){
			 	$(val).find(":input").attr("id",newId+$(val).find(":input").attr("id"));
			}
    	});

Answer 3

Vous devez utiliser l'événement «live» pour le faire fonctionner avec le DOM dynamique. Donc, si la classe pour vos entrées de datepicker est 'date-input', le code suivant le fera fonctionner:

 $(document).ready(function() {
    $('.date-input').live('click', function() {
    $(this).datepicker('destroy').datepicker({showOn:'focus'}).focus();
        });
});
 

Answer 4

Utilisez $ j (id ou classe) .removeClass ('hasDatepicker'). Datepicker ();

Ça fonctionne

Answer 5

Utilisez les sélecteurs jQuery:

 $(".mydatepicker:not(.hasDatepicker)").datepicker()