呈现 html 代码后，Flatpickr 不显示答案

【问题标题】：Flatpickr doesn't show after html code is rendered呈现 html 代码后，Flatpickr 不显示
【发布时间】：2022-12-28 21:57:50
【问题描述】：

我正在使用 Flatpicker 来显示日期时间选择器，并且以下代码工作正常，如果我单击输入字段，日历将打开并且用户可以选择日期时间。

<input id="datetime" class="form-control datetime" type="text" name="test">

现在我有一个按钮，它使用 javascript 创建 html 并在屏幕上添加一个新的输入。输入字段按预期显示，但单击它不会打开 Flatpickr 日历。

$('#addplanning').click(function() {
  let template =
    `<tr data-index="">
       <td>
         <input id="datetime" class="form-control datetime" type="text" name="planning[` + i + `][start_date]" value="{{$start_time->toDateTimeLocalString()}}" required>
       </td>
     </tr>`;
        
   i++;
   $('#planning-body').append(template);
});

标准的 html 'datetime-local' 函数似乎有效，但使用 Flatpicker 或 jqueryui 不显示日历。

有谁知道我如何才能完成这项工作？

【问题讨论】：

标签： javascript jquery-ui datepicker datetimepicker flatpickr

【解决方案1】：

您必须重新应用 on.click 事件处理程序的函数，因为您的新渲染组件尚未分配给该事件处理程序，所以我会尝试包装整个函数并为其命名，然后，每当您渲染该组件时，您再次运行该函数，以便它重新分配它，有很多方法可以做到这一点，但您应该寻找您的框架提供的方法，希望它有效！:)

【讨论】：