为什么这个 jQuery 不能用 flatpickr 工作？（动态 add/remove 日期时间字段）

Question

这让我抓狂。

这里是jfiddle显示情况：

我正在尝试动态添加日期时间输入字段。我正在使用 flatpickr 作为日期时间选择。

好像不管我做什么，都只会触发第一个click(function()。因此，删除点击不会触发，点击输入字段也不会触发 flatpickr。

我感觉这是一个 jQuery 冲突问题，但不知道我应该如何更改它以便所有功能相互配合。

一切都在 jfiddle，但这里是 HTML 和 JS:

<div id="meta_inner">
    <span id="here"></span>
    <span class="add">Add Group</span>
</div>

$(document).ready(function () {
    var count = 1;

    $(".add").click(function() {
       count = count + 1;
       $('#here').append('<p> Group Name <input type="text" name="groups['+count+'][post_title]" value="" /> -- Start Date : <input id="datetime_'+count+'" type="text" name="groups['+count+'][startdate]" value="" /><span class="remove">Remove Group</span><input type="hidden" name="groups['+count+'][object_id]" value="" /></p>' );
       return false;
     });

     $("#here").on('click', '.remove', function() {
          $(this).parent().remove();
     });

      var config =  {
                    enableTime: true,
                    dateFormat: "Y-m-d H:i",
                    minDate: "today",
                    maxDate: new Date().fp_incr(365)
      };

      $("#here").on('click', '[id *="datetime_"]', function() {
          $(this).flatpickr(config);
     });

});

编辑：

基于评论中的链接 post，修改了 jQuery（修改后的版本如上所示）。

现在几乎正常，但是当我单击日期字段时，flatpickr 日历弹出并立即关闭。

当前 fiddle 是 https://jsfiddle.net/mao2je6k/1/

知道是什么原因造成的吗？

Answer 1

当您尝试为 Dom 中不存在的元素添加侦听器时，会出现此问题。

您在元素上添加侦听器以将其移除，但在单击添加按钮后该元素附加到 DOM。

您需要在父级上添加侦听器。您可以在 jQuery 的“.live() - .delegate() .on()”方法中阅读更多相关信息。

这里是你的答案： ** https://jsfiddle.net/wgz8pn3b/23/ **

为什么这个 jQuery 不能用 flatpickr 工作？（动态 add/remove 日期时间字段）

Why isn't this jQuery with flatpickr working? (dynamically add/remove date-time field)

jquery

flatpickr

为什么这个 jQuery 不能用 flatpickr 工作？ （动态 add/remove 日期时间字段）

Why isn't this jQuery with flatpickr working? (dynamically add/remove date-time field)

jquery

flatpickr

为什么这个 jQuery 不能用 flatpickr 工作？（动态 add/remove 日期时间字段）