动态插入 HTML DIV 会破坏页面上的 jQuery DatePicker

Posted 2023-05-08

【中文标题】动态插入 HTML DIV 会破坏页面上的 jQuery DatePicker

【英文标题】：Dynamically inserting HTML DIV destroys jQuery DatePicker on the page

【发布时间】：2019-05-14 03:41:39

【问题描述】：

我有一个 html 页面应用程序，其中包含绑定到 jQuery 日期选择器的文本输入。它在启动时被初始化/绑定，并且运行良好。

该页面在同一页面上的日期选择器文本输入字段下方有一个内部容器 DIV。

我包含一张图片，因为我需要隐藏一些信息：

当我在这个内部容器中动态插入一个弹出 FORM 时，它变得可见、居中、漂浮在容器 DIV 上。

<div id="CLC_Form">...</div>
var e = document.getElementById("contentDIV");
e.innerHTML += clc_div;

但是，当我删除添加的表单时（当用户单击弹出表单上的“保存”按钮时），它也会破坏日期选择器，清除所选日期，并使日期选择器字段失效/未绑定且无响应。

var e = document.getElementById("CLC_Form");
e.parentElement.removeChild(e);

有什么想法吗？如果我不够全面，请随时询问更多信息。

谢谢

【问题讨论】：

innerHTML 通常是个坏主意。请改用 createElement 和 appendChild。

请将相关代码作为格式化文本包含在问题中，而不是图像。

请提供一个最小、完整且可验证的示例：***.com/help/mcve

【参考方案1】：

而不是使用：

e.innerHTML += clc_div;

我用过：

e.insertAdjacentHTML("beforeend", clc_div);

问题解决了。