jQuery插件datetimepicker仅在ajax加载时初始化失败

jQuery plugin datetimepicker failing to initialize only on ajax load

本文关键字：初始化 失败 加载 ajax 插件 datetimepicker 仅在 jQuery      更新时间：2023-09-26

我使用jQuery插件日期时间选择器。使用datetimepicker，我能够在页面加载时正常输入工作，没有问题。它是用以下Javascript代码初始化的:

$('.datetimepicker').datetimepicker({
    step:30
});

为了更完整，输入使用以下html:

<input class="datetimepicker" type="text" name="datetime" />

到目前为止一切顺利。但是，问题是在加载AJAX时(它工作得很好)，将以下输入加载到页面上:

<input class="datetimepicker" type="text" name="datetime" id="popuppick"/>

显然，我需要创建一个事件处理程序来监听新创建的输入:

$(document).on("click", '#popuppick', function(){
    alert("new link clicked!");
    $('.datetimepicker').datetimepicker({
        step:30
    });
});

警报工作(仅在ajax加载的输入)，但它不初始化datetimepicker插件。实际上，错误消息显示:

Uncaught TypeError: $(…)。Datetimepicker不是函数。

这让我觉得很疯狂，因为在同一个页面上，在AJAX加载之前，第一个工作得很好!

我试着把它扔到AJAX回调的成功，但同样的事情发生(警报和控制台)。日志工作，但datetimepicker不初始化)。我试过使用id作为选择器，但结果相同。尽管在第一个页面加载时就这样做了，但jQuery并没有将其识别为一个函数，这一事实是无法改变的。

我试过使用jsfiddle，但我不知道如何加载插件，所以它不会真正帮助我。

我在这里创建了一个活塞的例子https://plnkr.co/edit/h2UlCwXg888QtVWJPlUn?p=preview

<script>
      $(function(){
        $("#addInput").on("click", function (event){
          var $inp = $("<input>",{id:"datePick", class:"datetimepicker"});
          $inp.appendTo("#insert");
          $('.datetimepicker').datetimepicker({
              step:30
          });
        });
      })
    </script>

在这里我插入一个输入字段动态到DOM(模仿您的ajax场景)的按钮单击。

注意:我在style.css文件中添加了datepicker css，并在script.js文件中缩小了js文件，因为这个插件没有任何CDN url。

虽然日期选择器在点击其输入文件时没有正确渲染，但我确信当你在项目中实现它时，它会起作用，在这里我只是展示如何初始化日期选择器。

如果你经常添加和删除日期选择器输入框，那么你需要自己清理，否则它可能会造成内存泄漏。

相关文章：