如何为动态添加到DOM的元素初始化DateTimePicker？

Question

I need to initialize a Bootstrap-DateTimePicker for inputs using jquery class-selector for elements that were created on the fly.

Typically, I would initialize the datetime picker for elements that were created when page is ready like so

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

But now I need to also apply the same thing on elements that were created on the dynamically. To get that to work, I did the following hack

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

The above code work only when you focus on the input which then it initialize the date time picker.

The issue with the above code, is that when an input has a "incorrectly formatted" default value, the format does not change. In another word, when the page is loaded the input does not have the DateTime bounded to it.

I tried to call the focus() event on page load, but that does not seems to be working either. This is what I tried

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

How can I initialize the datetimepicker for predefined elements and elements that were dynamically created after page load?

I created the following fiddle to show how the datetime is not initialized on page load https://jsfiddle.net/516zsh7b/510/

Answer 1

Well, the best way would be to know how/when you add these new elements and add the logic there...

If you really need a reactive way to run a piece of JS code when an element is added to DOM, you could try mutation observers (not the best for performance): http://ryanmorr.com/using-mutation-observers-to-watch-for-element-availability/