Twitter bootstrap 如何动态创建引导数据采集器？

我需要使用jQuery动态创建一个日期选择器。在我的表单中，我将有一个按钮来创建日期选择器

以下是我迄今为止尝试的代码：

<div id="examDatesContainer">
    <div class="form-group">
        <label for="examDate" class="col-sm-2 caption">
            <fmt:message key="exam.date"/>:<strong style="font-size:14px;" class="asterisk">*</strong>
        </label>
        <div class="col-sm-4">
            <div class="input-group date">
                <input type="datetime" class="form-control examDate" id="examDate" name="examDate" value="" readonly >
                <div class="input-group-addon" class="examDateCalendarIcon">
                    <i class="fa fa-calendar"></i>
                </div>
            </div>
            <div class="help-block with-errors"></div>
        </div>
    </div>

    <div class="form-group examDateTemplate" style="display: none;">
        <label for="examDate" class="col-sm-2 caption"></label>
        <div class="col-sm-4">
            <div class="input-group date">
                <input type="datetime" class="form-control examDate" name="examDate" value="" readonly >
                <div class="input-group-addon" class="examDateCalendarIcon">
                    <i class="fa fa-calendar"></i>
                </div>
                <div class="input-group-addon">
                    <i class="fa fa-minus-circle"></i>
                </div>
            </div>
        </div>
    </div>

</div>

<div class="form-group">
    <label for="examDate" class="col-sm-2 caption">
    </label>
    <div class="col-sm-4">
        <button id="addExamDateBtn" type="button" class="btn btn-sm btn-primary">
            <span class="fa fa-plus"> &nbsp;</span>
            <fmt:message key="add"/>
        </button>
    </div>
</div>

基本上，我最初只显示一个日期选择器。然后我有一个按钮来添加更多的日期选择器。datepicker的模板是隐藏的，单击“添加更多”按钮，我只需克隆它并将其添加到DOM中。

使用下面的代码

$('body').on('focus',".examDate", function(){
  $(this).datetimepicker({
   format: 'DD/MM/YYYY',
   ignoreReadonly: true,
   showTodayButton: true
 });
});

这样，动态创建的元素也可以初始化datetimepicker

发布了一个工作示例：

每次将日期选择器容器（显然包含日期选择器）添加到DOM时，日期选择器都会初始化。这就是我解决这个问题的方法，希望对以后有所帮助

更新

DOMInsertedNode的使用现在已经有一段时间不推荐了。相反，您可以尝试基于以下内容的东西，使用mutationobserver

新的突变观察者（功能（突变）{
变量选择器=“.datepicker”；
//检查所有刚刚发生的突变
对于（变量i=0；i<0.length；++i）{
//查看此变异的所有添加节点
对于（var j=0；j<突变[i]。addedNodes.length；++j）{
var target=突变[i].新增节点[j]；
if（target&&target.nodeType==Node.ELEMENT\u Node）{
var children=$（目标）.find（选择器）；
if（target.matches（选择器））{
$（目标）.datepicker({
格式：“DD/MM/YYYY”，
ignoreReadonly:对，
ShowToday按钮：true
});
}
else if（childrence.length>0）{
子项。每个（函数（）{
$（此）.datepicker({
格式：“DD/MM/YYYY”，
ignoreReadonly:对，
ShowToday按钮：true
});
});
}
}
}
}
}).遵守（文件查询选择器（“正文”）{
儿童名单：是的，
子树：真
});

这很有效。但，在你们第一次点击文本字段之前，点击图标是不起作用的。单击文本字段后，只有“单击日历”图标有效。

$('body').on('focus',".examDate", function(){
  $(this).datetimepicker({
   format: 'DD/MM/YYYY',
   ignoreReadonly: true,
   showTodayButton: true
 });
});

$('body').on('DOMNodeInserted', function (e) {
    if (e.target.classList.contains('datepicker-container')) {
        $('.datepicker').datepicker({
            format: 'DD/MM/YYYY',
            ignoreReadonly: true,
            showTodayButton: true
        });
    }
})

new MutationObserver(function (mutations) {
    var selector = ".datepicker";
    // look through all mutations that just occured
    for (var i = 0; i < mutations.length; ++i) {
        // look through all added nodes of this mutation
        for (var j = 0; j < mutations[i].addedNodes.length; ++j) {
            var target = mutations[i].addedNodes[j];

            if (target && target.nodeType === Node.ELEMENT_NODE) {
                var children = $(target).find(selector);

                if (target.matches(selector)) {
                    $(target).datepicker({
                        format: 'DD/MM/YYYY',
                        ignoreReadonly: true,
                        showTodayButton: true
                    });
                }
                else if (children.length > 0) {
                    children.each(function () {
                        $(this).datepicker({
                            format: 'DD/MM/YYYY',
                            ignoreReadonly: true,
                            showTodayButton: true
                        });
                    });
                }
            }
        }
    }
}).observe(document.querySelector("body"), {
    childList: true,
    subtree: true
});