poner datepicker () en elementos creados dinámicamente - JQuery / JQueryUI

He creado cuadros de texto dinámicamente y quiero que cada uno de ellos pueda mostrar un calendario al hacer clic. El código que estoy usando es:

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

Lo cual solo funcionará en el primer cuadro de texto, aunque todos mis cuadros de texto tienen una clase llamada datepicker_recurring_start.

¡Su ayuda es muy apreciada!

aquí está el truco:

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

MANIFESTACIÓN

La $('...selector..').on('..event..', '...another-selector...', ...callback...);sintaxis significa:
agregue un oyente a ...selector..( bodyen nuestro ejemplo) para el evento ..event..('foco' en nuestro ejemplo). Para todos los descendientes de los nodos coincidentes que coincidan con el selector ...another-selector...( .datepicker_recurring_starten nuestro ejemplo), aplique el controlador de eventos ...callback...(la función en línea en nuestro ejemplo)

Ver http://api.jquery.com/on/ y especialmente la sección sobre "eventos delegados"

Para mí, a continuación, jquery funcionó:

cambiando "cuerpo" a documento

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

Gracias a skafandri

Nota: asegúrese de que su identificación sea diferente para cada campo

Excelente respuesta de skafandri +1

Esto se acaba de actualizar para comprobar la clase hasDatepicker.

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

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

});

Asegúrese de que su elemento con la .date-pickerclase NO tenga ya una hasDatepickerclase. Si lo hace, incluso un intento de reinicialización con $myDatepicker.datepicker();fallará. En su lugar, debes hacer ...

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

Debe ejecutar .datepicker();nuevamente después de haber creado dinámicamente los otros elementos del cuadro de texto.

Recomendaría hacerlo en el método de devolución de llamada de la llamada que agrega los elementos al DOM.

Entonces, digamos que está utilizando el método JQuery Load para extraer los elementos de una fuente y cargarlos en el DOM, haría algo como esto:

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

El nuevo método para los elementos dinámicos es MutationsObserver . El siguiente ejemplo usa underscore.js para usar la función (_.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
});

Esto fue lo que funcionó para mí (usando jquery datepicker):

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

Ninguna de las otras soluciones funcionó para mí. En mi aplicación, agrego los elementos del rango de fechas al documento usando jquery y luego les aplico datepicker. Entonces, ninguna de las soluciones de eventos funcionó por alguna razón.

Esto es lo que finalmente funcionó:

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

Espero que esto ayude a alguien porque esto me hizo retroceder un poco.

puede agregar la clase .datepicker en una función de javascript, para poder cambiar dinámicamente el tipo de entrada

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

He modificado la respuesta de @skafandri para evitar volver a aplicar el datepickerconstructor a todas las entradas con la .datepicker_recurring_startclase.

Aquí está el HTML:

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

Aquí está el JS:

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

aquí hay una demostración funcional

Esto es lo que funcionó para mí en JQuery 1.3 y se muestra en el primer clic / enfoque

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

esto necesita que tu entrada tenga la clase 'mostrar_calendario'

Live es para JQuery 1.3+ para las versiones más nuevas necesita adaptar esto a "on"

Vea más sobre la diferencia aquí http://api.jquery.com/live/

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