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

【问题标题】：How to initialize DateTimePicker for elements added to the DOM on the fly?如何为动态添加到 DOM 的元素初始化 DateTimePicker？
【发布时间】：2019-03-01 15:03:22
【问题描述】：

我需要为动态创建的元素使用 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/

【问题讨论】：

在您将焦点设置到一个元素之前，您的代码不会运行（一次只能有一个焦点）。
这就解释了为什么.focus() 不起作用。解决这个问题的方法是什么？
在事件（或可能是“输入”事件）之外调用您的代码。
@PoulBak 你能解释一下吗？
@MikeA 他的意思是使用input 而不是focus。

标签： javascript jquery datetimepicker bootstrap-datetimepicker

【解决方案1】：

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

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

【讨论】：