javascript - 当我使用 JQuery 创建文本框时，Materialise 日期选择器不起作用

Question

我使用了 Materialise CSS ( https://materializecss.com/ ) 日期选择器。但是，当我使用 JQuery 动态创建文本框时，我无法访问日期选择器。我不确定它不起作用。但是，当我们手动创建文本框时，可以访问日期选择器。请检查我的代码。

手动创建文本框:

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<input type="text" class="datepicker">


<script>
$(document).ready(function(){
    $('.datepicker').datepicker();
});
</script>

使用我上面的代码可以访问日期选择器。

动态文本框创建

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<button id="add">add</button>

<div id="createtextbox"></div>

<script>
  $(document).ready(function(){
       $('#add').click(function(){
          $("#createtextbox").append('<input type="text" class="datepicker" value="" />');
       });
       $('.datepicker').datepicker();
  });
</script>

使用此代码，我无法访问日期选择器。请帮我解决这个问题吗？预先感谢:)

Answer 1

您在创建输入之前调用datepicker()。此外，您正在每个元素上创建多个输入元素(我认为这不是必需的行为)。

您的流程基本上是:

- Document is ready
-- Invoke datepicker() //There is no datepicker input avaiable here
--- (Click) - Create and append a datepicker input
--- (Click) - Create and append a datepicker input
--- (Click) - Create and append a datepicker input
...

你的代码执行顺序如下(看评论):

  $(document).ready(function(){ //1- document is ready
       $('#add').click(function(){ //Event listener is being registered but is not fired as no one clicked a button
          $("#createtextbox").append('<input type="text" class="datepicker" value="" />');
       });
       $('.datepicker').datepicker(); //2 invoke datepicker... but wait, there is no input - as no one pressed the button
  });

您应该将其更改为:

  $(document).ready(function(){ //1- document is ready
       $('#add').click(function(){ //Event listener is being registered, this time when it will be fired it will invoke date picker as it was created in step 2
           $('.datepicker').datepicker();
       });
       $("#createtextbox").append('<input type="text" class="datepicker" value="" />'); //2 Create the input which will be used as the datepicker - BEFORE the click event is fired
  });

这将形成正确的流程:

- Document is ready
-- Create and append a datepicker input
--- (Click) - Invoke datepicker() //There is datepicker input
--- (Click) - Invoke datepicker() //There is datepicker input
--- (Click) - Invoke datepicker() //There is datepicker input
...