JQuery даты и времени не работают, когда поля создаются динамически

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

$('#add_another_event').click(function() 
    {
        var $address = $('#sub_events');
        var num = $('.clonedAddress').length; // there are 5 children inside each address so the prevCloned address * 5 + original
        var newNum = new Number(num + 1);
        var newElem = $address.clone().attr('id', 'address' + newNum).addClass('clonedAddress');

        //set all div id's and the input id's
        newElem.children('div').each (function (i) {
            this.id = 'input' + (newNum*5 + i);
        });

        newElem.find('input').each (function () {
            this.id = this.id + newNum;
            this.name = this.name + newNum;
        });

        if (num > 0) {
            $('.clonedAddress:last').after(newElem);
        } else {
            $address.after(newElem);
        }


        $('#btnDel').removeAttr('disabled');              

    });

Это те поля, которые я клонирую

<p><label>Art Space </label>
<input id="as_name" name="as_name" class="txt-input small" type="text">
<input id="as_id" name="as_id" class="txt-input small" type="hidden"></p>
<p><label>Start Date </label>
<input id="start_date" name="start_date" class="datepicker txt-input small" type="text"></p>
<p><label>End Date </label>
<input id="end_date" name="end_date" class="datepicker txt-input small" type="text"></p>
<p><label>Opening Hours </label>
From : <input style="width: 100px" id="time_from" name="time_from" class="timepicker txt-input small" type="text">
To : <input style="width: 100px" id="time_to" name="time_to" class="timepicker txt-input small" type="text">
</p>

Выбор времени и даты

  $('.timepicker').timepicker({
        hourGrid: 4,
        minuteGrid: 10,
        timeFormat: 'hh:mm tt'
    });

    $('.datepicker').datepicker();

Моя проблема выше, сборщики не отображаются, когда поля клонированы.

Я пробовал с jQuery .live() но это не работает Я не эксперт по JQuery.

Вот пример http://jsfiddle.net/MkhZ2/17/

Источник

2 ответа

Решение

Вам необходимо повторно инициализировать средства выбора даты / времени для новых элементов и очистить классы, которые были добавлены виджетом пользовательского интерфейса:

$('.datepicker', newElem).removeClass('hasDatepicker').datepicker()

В этом случае, предоставьте новую коллекцию в качестве контекста, чтобы вы не искали весь документ.

Это показывает одну из ловушек с клонированием против шаблонизации. Если вы использовали шаблон для создания новых форм, вы не рискуете скопировать данные и классы, которые могут повлиять на способ создания виджетов в новой форме. В вашем случае вам нужно удалить hasDatepicker класс, который применяется пользовательским интерфейсом и предотвращает инициализацию новых средств выбора даты на входе. Тем не менее, вы также не можете использовать метод очистки datepicker('destroy') потому что на новых узлах на самом деле нет выбора даты. Таким образом, вам в конечном итоге придется сделать очистку вручную.

Источник

Вы должны призвать

$('target_selector').datepicker();

для каждого динамически добавляемого элемента.

Источник
Другие вопросы по тегам