colocar datepicker () em elementos criados dinamicamente - JQuery / JQueryUI

Eu criei caixas de texto dinamicamente e quero que cada uma delas seja capaz de exibir um calendário com um clique. O código que estou usando é:

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

Que só funcionará na primeira caixa de texto, embora todas as minhas caixas de texto tenham uma classe chamada datepicker_recurring_start.

Sua ajuda é muito apreciada!

aqui está o truque:

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

DEMO

A $('...selector..').on('..event..', '...another-selector...', ...callback...);sintaxe significa:
Adicionar um ouvinte ao ...selector..( bodyno nosso exemplo) para o evento ..event..('foco' no nosso exemplo). Para todos os descendentes dos nós correspondentes que correspondem ao seletor ...another-selector...( .datepicker_recurring_startem nosso exemplo), aplique o manipulador de eventos ...callback...(a função inline em nosso exemplo)

Veja http://api.jquery.com/on/ e especialmente a seção sobre "eventos delegados"

Para mim, abaixo jquery funcionou:

alterando "corpo" para documento

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

Graças a skafandri

Nota: certifique-se de que seu id é diferente para cada campo

Excelente resposta por skafandri +1

Isso foi atualizado apenas para verificar a classe hasDatepicker.

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

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

});

Certifique-se de que seu elemento com a .date-pickerclasse NÃO tenha uma hasDatepickerclasse. Se isso acontecer, mesmo uma tentativa de reinicialização com $myDatepicker.datepicker();falhará! Em vez disso, você precisa fazer ...

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

Você precisa executar o .datepicker();novamente depois de criar dinamicamente os outros elementos da caixa de texto.

Eu recomendaria fazer isso no método de retorno de chamada da chamada que está adicionando os elementos ao DOM.

Então, digamos que você esteja usando o método JQuery Load para extrair os elementos de uma fonte e carregá-los no DOM, você faria algo assim:

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

O novo método para elementos dinâmicos é MutationsObserver . O exemplo a seguir usa underscore.js para usar a função (_.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
});

Isso foi o que funcionou para mim (usando jquery datepicker):

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

Nenhuma das outras soluções funcionou para mim. Em meu aplicativo, estou adicionando os elementos de intervalo de datas ao documento usando jquery e, em seguida, aplicando datepicker a eles. Portanto, nenhuma das soluções do evento funcionou por algum motivo.

Isso é o que finalmente funcionou:

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

Espero que isso ajude alguém, porque isso me atrapalhou um pouco.

você pode adicionar a classe .datepicker em uma função javascript, para poder alterar dinamicamente o tipo de entrada

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

Modifiquei a resposta @skafandri para evitar reaplicar o datepickerconstrutor a todas as entradas com .datepicker_recurring_startclasse.

Aqui está o HTML:

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

Aqui está o JS:

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

aqui está uma demonstração de trabalho

Isso é o que funcionou para mim no JQuery 1.3 e está mostrando no primeiro clique / foco

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

isso precisa que sua entrada tenha a classe 'mostrar_calendario'

Live é para JQuery 1.3+. Para versões mais recentes, você precisa adaptá-lo para "on"

Veja mais sobre a diferença aqui http://api.jquery.com/live/

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