Jquery datepicker не работает с динамически созданным html

Ответ 1

Когда вы пишете

$(document).ready(function () {
    $(".datepicker").datepicker({...});
});

Этот фрагмент запускается сразу после загрузки страницы. Поэтому ваших динамических датпикеров еще нет. Вам нужно вызвать $(aSuitableSelector).datepicker(...) для каждого вновь вставленного элемента. Во-первых, используйте var для хранения ваших опций:

var datePickerOptions = {
    dateFormat: 'yy/m/d',
    firstDay: 1,
    changeMonth: true,
    changeYear: true,
    // ...
}

Это позволяет вам писать

 $(document).ready(function () {
    $(".datepicker").datepicker(datePickerOptions);
 });

и написать

 // right after appending dateFrom to the document ...
 $(dateFrom).datepicker(datePickerOptions);

 //...

 // right after appending dateTo ...
 $(dateTo).datepicker(datePickerOptions);

Вы также можете использовать возможность JQuery для прослушивать изменения DOM, чтобы избежать необходимости применять магию JS к вновь вставленным элементам - но я не думаю, что это стоит он.

Ответ 2

Я нашел самый простой способ добавить средство выбора даты для динамически добавляемого поля ввода:

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

Ответ 3

Самый простой способ решить эту проблему - использовать плагин livequery:

http://docs.jquery.com/Plugins/livequery

Вместо того, чтобы применять datepickers ко всем объектам определенного класса, вы указываете LiveQuery применить его к этим объектам. LiveQuery, в свою очередь, будет продолжать применять datepicker, даже когда ваш DOM будет изменен позже.

Я не видел, чтобы производительность снижалась при использовании usnig, а изменения кода действительно минимальны (вам нужно добавить плагин на страницу и изменить только одну строку кода).

Вы бы использовали его так:

$(".datepicker").livequery(
        function(){ 
            // This function is called when a new object is found. 
            $(this).datepicker({ ...}});
        }, 
        function() { 
            // This function is called when an existing item is being removed. I don't think you need this one so just leave it as an empty function.
        }
); 

С этого момента каждый раз, когда вы добавляете объект с классом datepicker, плагин datepicker будет автоматически применен к нему.

Ответ 4

Вы можете просто использовать это.

$('body').on('focus',".date-picker", function(){
  $(this).datepicker();
});

Ответ 5

Код, который привязывает datepickers, лучше всего выполнить сразу после того, как ваш html будет динамически создан. Если вы хотите сохранить код для инициализации datepicker в отдельном файле, я бы рекомендовал следующий подход: После того, как вы закончите генерировать свой html (я полагаю, он создан на готовом документе), используйте

$(document).trigger("customHtmlGenerated");

И в файле datepicker вместо $(document).ready(function(){...}) используйте $(document).bind("customHtmlGenerated", function(){...});

Ответ 6

Я положил

$( "#InstallDate" ).datepicker({
  showOn: "button",
    minDate: 0, // no past dates
  buttonImage: "../images/Date.png",
  buttonImageOnly: true,
  buttonText: "Select date",
  dateFormat: 'yy-mm-dd',
}); 

в файл DatePicker.js script, а затем добавили следующую строку в конце моей сгенерированной формы Ajax Html

<script type='text/javascript' src='/inc/DatePicker.js'></script> 

Ответ 7

$( ".datepicker" ).datepicker({inline: true,dateFormat: "dd-mm-yy"});

Ответ 8

Пожалуйста, добавьте следующий код после добавления элемента.

$(".datepicker").datepicker({
        dateFormat: 'yy/m/d',
        firstDay: 1,
        changeMonth: true,
        changeYear: true,
        showOn: 'both',
        autosize: true,
        buttonText: "Select date",
        buttonImage: '../Content/images/calendar.png',
        buttonImageOnly: true
    });

Ответ 9

Я решил для динамически созданного элемента ввода с этим: -

$(document).ready(function () {
    $(selector).removeClass('hasDatepicker').datepicker();
});

Ответ 10

Код jQuery выполняется, когда документ готов: это означает, что начальная разметка вашей страницы будет готова, а не после того, как ваши файлы javascript будут работать.

Я предполагаю, что ваш код для инициализации datepickers запускает до вашего script, создавая элементы, поэтому ничего не происходит.

Попробуйте выполнить код jquery при загрузке страницы с помощью . load() вместо .ready(). Событие загрузки запускается при загрузке всех активов (js, image...).

$(window).load(function () {
    $(".datepicker").datepicker({
        ...
    });
});

Вы также можете просто использовать способ javascript. Скрипты выполняются в том порядке, в котором они выполняются на странице. Таким образом, вы могли:

• переместите свои скрипты прямо перед тегом закрывающего тега `` `
• убедитесь, что ваш первый script (создающий элементы) предшествует коду datepicker
• удалите обработчик .ready() для выбора даты. Когда вы поместите свой script в конце, они неявно запускаются, когда DOM готов...

Ответ 11

Вероятно, это вопрос, в каком порядке запускается javascript. Попробуйте поставить

$(".datepicker").datepicker({
    dateFormat: 'yy/m/d',
    firstDay: 1,
    changeMonth: true,
    changeYear: true,
    showOn: 'both',
    autosize: true,
    buttonText: "Select date",
    buttonImage: '../Content/images/calendar.png',
    buttonImageOnly: true
});

После вашего javascript, который создает html.