引导日期选择器在纯 HTML 中工作，但不在 (#).html() 中答案

【问题标题】：Bootstrap datepicker is working in plain HTML but not in (#).html()引导日期选择器在纯 HTML 中工作，但不在 (#).html() 中
【发布时间】：2018-04-16 02:03:46
【问题描述】：

在 html 中工作：

<input class="m-ctrl-medium date-picker" size="16" type="text" id='lateETD1' name="dateRecv" value=""/>

不工作：

var ETD = $("#ETD");
ETD.html("<input class='m-ctrl-medium date-picker' id='lateETD1' name="dateRecv" size='16' type='text'  value=''/>");

DOM 插入中的问题。出现一个简单的文本框，而不是日期选择器。

【问题讨论】：

是 id ETD 是 div id？

标签： javascript jquery html bootstrap-4

【解决方案1】：

试试这个：

var ETD = $("#ETD");
ETD.html("<input class='m-ctrl-medium date-picker' id='lateETD1' name="dateRecv" size='16' type='text'  value=''/>");
$(ETD).datepicker();

【讨论】：

请注意#ETD 是包含div。 input 是日期选择器。
@RoryMcCrossan，你是对的，应该是：$('#lateETD1').datepicker();

【解决方案2】：

这是因为您大概是在 DOM 加载时初始化日期选择器，也就是在新元素存在之前。在将新元素附加到 DOM 后，您需要在新元素上再次对其进行初始化，如下所示：

$('<input class="m-ctrl-medium date-picker" id="lateETD1" name="dateRecv" size="16" type="text" value="" />').appendTo('#ETD').datepicker()

【讨论】：

【解决方案3】：

从脚本动态添加文本框后，您需要重新初始化日期选择器。

var ETD = $("#ETD");
ETD.html("<input class='m-ctrl-medium date-picker' id='lateETD1' name='dateRecv' size='16' type='text'  value=''/>");

$('#lateETD1').datepicker({
    autoclose: true
});

<link rel="stylesheet" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

<div id='ETD'></div>

【讨论】：