mettere datepicker () su elementi creati dinamicamente - JQuery / JQueryUI

Ho creato caselle di testo dinamicamente e desidero che ciascuna di esse sia in grado di visualizzare un calendario al clic. Il codice che sto usando è:

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

Che funzionerà solo sulla prima casella di testo, anche se tutte le mie caselle di testo hanno una classe chiamata datepicker_recurring_start.

Il tuo aiuto è molto apprezzato!

ecco il trucco:

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

DEMO

La $('...selector..').on('..event..', '...another-selector...', ...callback...);sintassi significa:
Aggiungi un ascoltatore a ...selector..( bodynel nostro esempio) per l'evento ..event..('focus' nel nostro esempio). Per tutti i discendenti dei nodi corrispondenti che corrispondono al selettore ...another-selector...( .datepicker_recurring_startnel nostro esempio), applica il gestore di eventi ...callback...(la funzione inline nel nostro esempio)

Vedi http://api.jquery.com/on/ e in particolare la sezione sugli "eventi delegati"

Per me di seguito jquery ha funzionato:

cambiando "corpo" in documento

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

Grazie a skafandri

Nota: assicurati che il tuo ID sia diverso per ogni campo

Ottima risposta di skafandri +1

Questo è appena aggiornato per controllare la classe hasDatepicker.

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

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

});

Assicurati che il tuo elemento con la .date-pickerclasse NON abbia già una hasDatepickerclasse. Se lo fa, anche un tentativo di reinizializzare con $myDatepicker.datepicker();fallirà! Invece devi fare ...

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

È necessario eseguire di .datepicker();nuovo dopo aver creato dinamicamente gli altri elementi della casella di testo.

Consiglierei di farlo nel metodo di callback della chiamata che aggiunge gli elementi al DOM.

Quindi diciamo che stai usando il metodo JQuery Load per estrarre gli elementi da una sorgente e caricarli nel DOM, faresti qualcosa del genere:

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

Il nuovo metodo per gli elementi dinamici è MutationsObserver . L'esempio seguente utilizza underscore.js per utilizzare la funzione (_.each).

MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;    

var observerjQueryPlugins = new MutationObserver(function (repeaterWrapper) {

    _.each(repeaterWrapper, function (repeaterItem, index) {

        var jq_nodes = $(repeaterItem.addedNodes);

        jq_nodes.each(function () {

            // Date Picker
            $(this).parents('.current-repeateritem-container').find('.element-datepicker').datepicker({
                dateFormat: "dd MM, yy",
                showAnim: "slideDown",
                changeMonth: true,
                numberOfMonths: 1
            });

        });

    });

});

observerjQueryPlugins.observe(document, {
    childList: true,
    subtree: true,
    attributes: false,
    characterData: false
});

Questo era ciò che ha funzionato per me (usando jquery datepicker):

$('body').on('focus', '.datepicker', function() {
 $(this).removeClass('hasDatepicker').datepicker();
});

Nessuna delle altre soluzioni ha funzionato per me. Nella mia app, sto aggiungendo gli elementi dell'intervallo di date al documento usando jquery e quindi applicando loro il datepicker. Quindi nessuna delle soluzioni per eventi ha funzionato per qualche motivo.

Questo è ciò che alla fine ha funzionato:

$(document).on('changeDate',"#elementid", function(){
    alert('event fired');
});

Spero che questo aiuti qualcuno perché questo mi ha un po 'indietro.

puoi aggiungere la classe .datepicker in una funzione javascript, per poter cambiare dinamicamente il tipo di input

 $("#ddlDefault").addClass("datepicker");
 $(".datepicker").datetimepicker({ timepicker: false, format: 'd/m/Y', });

Ho modificato la risposta di @skafandri per evitare di riapplicare il datepickercostruttore a tutti gli input con .datepicker_recurring_startclasse.

Ecco l'HTML:

<div id="content"></div>
<button id="cmd">add a datepicker</button>

Ecco il JS:

$('#cmd').click(function() {
  var new_datepicker = $('<input type="text">').datepicker();
  $('#content').append('<br>a datepicker ').append(new_datepicker);
});

ecco una demo funzionante

Questo è ciò che ha funzionato per me su JQuery 1.3 e viene mostrato al primo clic / focus

function vincularDatePickers() {
    $('.mostrar_calendario').live('click', function () {
        $(this).datepicker({ showButtonPanel: true, changeMonth: true, changeYear: true, showOn: 'focus' }).focus();
    });
}

questo richiede che il tuo input abbia la classe 'mostrar_calendario'

Live è per JQuery 1.3+ per le versioni più recenti devi adattarlo a "on"

Scopri di più sulla differenza qui http://api.jquery.com/live/

$( ".datepicker_recurring_start" ).each(function(){
    $(this).datepicker({
        dateFormat:"dd/mm/yy",
        yearRange: '2000:2012',
        changeYear: true,
        changeMonth: true
    });
});