Как инициализировать DateTimePicker для элементов, добавляемых в DOM на лету? - PullRequest
Новая
       89

Как инициализировать DateTimePicker для элементов, добавляемых в DOM на лету?

0 голосов
/ 26 сентября 2018

Мне нужно инициализировать Bootstrap-DateTimePicker для входов, использующих селектор классов jquery для элементов, которые были созданы на лету.

Как правило, я бы инициализировал средство выбора даты и времени для элементов, которыебыли созданы, когда страница готова, вот так 

$('.date-picker').datetimepicker({
     format: 'D/M/YYYY',
     useCurrent: false
});

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

$(document).on('focus', '.date-picker', function(){
    $(this).datetimepicker({
        format: 'D/M/YYYY',
        useCurrent: false
    });
});

Приведенный выше код работает только тогда, когда вы сосредотачиваетесь на вводе, который затем инициализирует средство выбора даты и времени.

Проблема сПриведенный выше код заключается в том, что если для ввода задано значение «неправильно отформатировано» по умолчанию, формат не изменяется.Другими словами, когда страница загружена, ввод не имеет привязки к DateTime.

Я пытался вызвать событие focus() при загрузке страницы, но, похоже, это тоже не работает.Это то, что я пытался 

$(document).on('focus', '.date-picker', function(){
    $(this).datetimepicker({
        format: 'D/M/YYYY',
        useCurrent: false
    });
}).focus();

Как я могу инициализировать DatetimePicker для предопределенных элементов и элементов, которые были динамически созданы после загрузки страницы?

Я создал следующую скрипку, чтобы показать, как datetimeне инициализируется при загрузке страницы https://jsfiddle.net/516zsh7b/510/

1 Ответ

0 голосов
/ 26 сентября 2018

Что ж, лучшим способом было бы узнать, как / когда вы добавляете эти новые элементы и добавляете туда логику ...

Если вам действительно нужен реактивный способ запуска фрагмента кода JS, когдаэлемент добавлен в DOM, вы можете попробовать наблюдателей мутаций (не лучший для производительности): http://ryanmorr.com/using-mutation-observers-to-watch-for-element-availability/

...