Функции Jquery не работают с динамически загружаемым содержимым (без функции привязки)

Question

У меня есть вопрос в javascript, что у меня есть форма, в которой есть кнопка добавления и удаления, при нажатии на нее некоторые поля формы повторяются и удаляются по нажатию кнопки. В этих полях у меня также есть datetimepicker, и я хочу, чтобы это должен также работать в сгенерированных полях, но он не работает, хотя я использовал класс вместо Id для предоставления им таких функций, как

    $(function () {
    var now = new Date();
    $('.time_in').datetimepicker({
        defaultDate: now,
        format: 'HH:mm'
    });
});

Но он работает только в первом поле вместо всех полей, я также прикрепил некоторые обработчики событий после изменения значений datetimepicker, но у меня нет проблем с ними, я знаю, как это сделать.

Я просто хотел спросить, как дать функцию или инициализировать поля с помощью datetimepicker.

Ниже скриншот

сценарий

Answer 1

Привет, поскольку вы создаете текстовые поля динамически, вы должны использовать делегирование событий, используйте jQuery's on() метод (требуется версия jQuery 1.7x+).

добавлять

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

вот небольшая демка http://jsfiddle.net/SJ7bJ/1013/

Answer 2

Вам нужно вызвать код, чтобы добавить указатель даты и времени в каждое поле после добавления новых элементов. Рассмотрите возможность рефакторинга кода для назначения dateptimepicker в отдельную функцию, которую можно вызывать из init и из функции #add.

$(function () {
    add_time_in_datetimepicker();
});

function add_time_in_datetimepicker() {
    var now = new Date();
    $('.time_in').datetimepicker({
        defaultDate: now,
        format: 'HH:mm'
    });
});

А затем в конце функции #add выполните тот же вызов. Это необходимо сделать для всех классов datetimepicker, которые вы хотите добавить динамически.