ставлячи datepicker () на динамічно створені елементи - JQuery / JQueryUI

Я динамічно створював текстові поля, і я хочу, щоб кожна з них могла відображати календар при натисканні. Я використовую код:

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

Який працюватиме лише в першому текстовому полі, хоча всі мої текстові поля мають клас, який називається datepicker_recurring_start.

Ваша допомога дуже цінується!

ось хитрість:

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

DEMO

У $('...selector..').on('..event..', '...another-selector...', ...callback...);синтаксичних засобів:
Додати слухача ...selector..( bodyв нашому прикладі) для події ..event..( «фокус» в нашому прикладі). Для всіх нащадків узгоджуючих вузлів, що відповідають селектору ...another-selector...( .datepicker_recurring_startу нашому прикладі), застосуйте обробник подій ...callback...(функція вбудованого в нашому прикладі)

Дивіться http://api.jquery.com/on/ і особливо розділ про "делеговані події"

Для мене нижче jquery працював:

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

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

Завдяки скафандрі

Примітка. Переконайтеся, що ваш ідентифікатор відрізняється для кожного поля

Відмінна відповідь скафандрі +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
});

Це для мене працювало (використовуючи jquery datepicker):

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

Жодне з інших рішень для мене не працювало. У своєму додатку я додаю елементи діапазону дат до документа за допомогою jquery, а потім застосовую до них датчик. Тож жодне рішення подій чомусь не спрацювало.

Ось що, нарешті, спрацювало:

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

Сподіваюся, що це комусь допоможе, тому що це мене трохи повернуло.

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

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

Я змінив відповідь @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);
});

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

Це те, що працювало для мене на JQuery 1.3 і показується в перший клік / фокус

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

для цього потрібно, щоб у вашому введенні був клас "mostrar_calendario"

Live призначений для JQuery 1.3 або новіших версій, для нових версій потрібно адаптувати це до "увімкнено"

Більше про різницю дивіться тут http://api.jquery.com/live/

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