动态追加行后flatpickr时间选择器失效问题求助

我有一个包含时间输入字段的表格，该时间输入使用flatpickr组件。表格中前两个静态时间输入字段可正常工作，但当我动态追加带有时间输入字段的行后，flatpickr无法正常运行。

问题原因 #

当前代码仅在页面初始加载时，对已经存在的.from和.to元素初始化了flatpickr实例。而动态添加的DOM元素是在页面加载完成后才创建的，没有被执行初始化逻辑，所以flatpickr无法生效。

解决方案 #

将flatpickr的初始化逻辑封装成可复用的函数，在页面加载时初始化静态元素，同时在动态添加新行之后，针对新添加的元素再次执行初始化（使用:last选择器只处理最新添加的元素，避免重复初始化已存在的实例）。

修改后的完整代码 #

HTML代码

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.js"></script>
</head>
<body>
<div class="container">
  <div class="row justify-content-center">
    <table>
    <tbody>
      <tr>
        <td><input type="time" class="form-control flatpickr from" name="from[]"></td>
        <td><input type="time" class="form-control flatpickr to" name="to[]"></td>
      </tr>
      <tr>
        <td><input type="time" class="form-control flatpickr from" name="from[]"></td>
        <td><input type="time" class="form-control flatpickr to" name="to[]"></td>
      </tr>
    </tbody>
    </table>
    <input type='button' class='btn btn-warning' value='&#43; Add more rows' id='addmore'>
  </div>
</div>
</body>
</html>

JavaScript代码

// 封装初始化函数，仅处理最新添加的时间输入框
function initNewFlatpickr() {
    $('.from:last').flatpickr({
        enableTime: true,
        noCalendar: true,
        time_24hr: true,
        minuteIncrement: 30
    });
    $('.to:last').flatpickr({
        enableTime: true,
        noCalendar: true,
        time_24hr: true,
        minuteIncrement: 30
    });
}

$(document).ready(function() {
    // 初始化页面上已有的静态时间输入框
    $('.from').flatpickr({
        enableTime: true,
        noCalendar: true,
        time_24hr: true,
        minuteIncrement: 30
    });
    $('.to').flatpickr({
        enableTime: true,
        noCalendar: true,
        time_24hr: true,
        minuteIncrement: 30
    });

    // 点击添加行按钮的逻辑
    $(document).on("click","#addmore",function() {
        var html = "<tr>" +
        "<td><input type='time' class='form-control flatpickr from' name='from[]' ></td>" +
        "<td><input type='time' class='form-control flatpickr to' name='to[]' ></td>" +
        "</tr>";
        $('tbody').append(html);
        // 给新添加的输入框初始化flatpickr
        initNewFlatpickr();
    });
});

内容的提问来源于stack exchange，提问作者Les Yun