时间戳

首页 > 解决方案 > 为什么这个带有 flatpickr 的 jQuery 不起作用？（动态添加/删除日期时间字段）

jquery - 为什么这个带有 flatpickr 的 jQuery 不起作用？（动态添加/删除日期时间字段）

问题描述

这让我发疯。

这是 jfiddle 显示情况：

https://jsfiddle.net/mao2je6k/

我正在尝试动态添加日期时间输入字段。我正在使用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);
     });

});

编辑：

根据评论中的链接帖子，修改了 jQuery（修改后的版本如上所示）。

现在一切都差不多了，但是当我单击日期字段时，flatpickr日历会弹出并立即关闭。

当前的小提琴是https://jsfiddle.net/mao2je6k/1/

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

标签： jqueryflatpickr

解决方案

当您尝试添加尚未在 Dom 中的元素的侦听器时，会发生此问题。

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

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

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

推荐阅读