如何在不重新加载页面的情况下重新加载页面的 JavaScript（Vanilla JS）

Question

当用户想要添加更多字段时，我将嵌套字段附加到 DOM。这是由 nested_fields.js 文件完成的。

问题是正在附加的字段之一是日历字段，该字段正在由另一个名为 calender_manager.js

的 JS 文件处理

calender_manager.js 正在使用 Flatpickr 模块，它会在页面的 HTML 文件中查找带有 .flatpickr class 的输入标签。加载页面时会发生这种情况，因此 nested_fields.js 使用 .flatpickr class 附加到 DOM 的字段不会被 calender_manager.js.[=11= 拾取]

到目前为止，我的解决方案是为嵌套日历字段制作一个自定义 JS 文件，该文件处理附加嵌套字段和添加 flatpickr。想知道有没有更好的办法

Answer 1

我从未听说过 flatpickr，但我只是调查了一下，也许我不知道你在问什么，但你是否试图在页面加载后启用它？如果这样调用 flatpickr(".my_input");再次有效。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<input type="text" class="my_input" /><br />
<input type="button" id="enable" value="Click to enable flatpickr" />
<input type="button" id="disable" value="Click to disable flatpickr" />

<script>
var f;
document.querySelector("#enable").onclick = function () {
    f = flatpickr(".my_input");
}
document.querySelector("#disable").onclick = function () {
    f.destroy();
}
</script>

如何在不重新加载页面的情况下重新加载页面的 JavaScript（Vanilla JS）

How to reload a JavaScript of a page without reloading the page (Vanilla JS)

javascript

dom

nested

calendar

flatpickr