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

Question

我需要使用jquery类选择器为动态创建的元素初始化Bootstrap-DateTimePicker用于输入。

通常，我会为页面准备好后创建的元素初始化日期时间选择器，如下所示

$('.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？

我创建了以下小提琴，以显示如何在页面加载时不初始化日期时间https://jsfiddle.net/516zsh7b/510/

Answer 1

好吧，最好的方法是知道如何/何时添加这些新元素并在其中添加逻辑...

如果在将元素添加到DOM时确实需要一种反应性的方式来运行一段JS代码，则可以尝试使用突变观察器（不是性能最佳的观察器）： http : //ryanmorr.com/using-mutation-observers-to -watch换元件可用性/