установка datepicker () на динамически созданные элементы - JQuery / JQueryUI

Для меня ниже jquery работал:

изменение "тела" на документ

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

Благодаря skafandri

Примечание. Убедитесь, что ваш идентификатор отличается для каждого поля.

Отличный ответ skafandri +1

Это просто обновлено, чтобы проверить класс hasDatepicker.

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

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

});

Убедитесь, что ваш элемент с классом .date-picker НЕ имеет класса hasDatepicker. Если это произойдет, попытка повторной инициализации с помощью $myDatepicker.datepicker(); не удастся! Вместо этого вам нужно сделать...

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

Вам нужно запустить .datepicker(); снова после того, как вы динамически создали другие элементы текстового поля.

Я бы рекомендовал сделать это в методе обратного вызова для вызова, который добавляет элементы в DOM.

Итак, скажем, вы используете метод JQuery Load для извлечения элементов из источника и загрузки их в DOM, вы бы сделали что-то вроде этого:

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

Новый метод для динамических элементов MutationsObserver.. В следующем примере используется underscore.js для использования функции (_.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
});

Я изменил ответ @skafandri, чтобы избежать повторного применения конструктора datepicker ко всем входам с классом .datepicker_recurring_start.

Здесь HTML:

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

Здесь JS:

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

здесь рабочая демонстрация

вы можете добавить класс .datepicker в функцию javascript, чтобы иметь возможность динамически изменять тип ввода

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

Ни один из других решений не работал у меня. В моем приложении я добавляю элементы диапазона дат в документ, используя jquery, а затем применяю datepicker к ним. Поэтому ни один из решений для событий не работал по какой-то причине.

Вот что наконец-то сработало:

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

Надеюсь, это поможет кому-то, потому что это немного меня отбросило.