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

Question

I have used Materialize CSS ( https://materializecss.com/ ) Date Picker. But, I couldn't able to access the date picker when I create the textbox dynamically using JQuery. I'm not sure It's not working. But, Can able to access date picker when we create a textbox manually. Please check my code.

Manual textbox creation:

<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>

Using my above code can able to access the date picker.

Dynamic textbox creation

<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>

Using this code, I couldn't able to access the date picker. Please help me to solve this? Thanks in advance :)

Answer 1

You are invoking the datepicker() before the input is being created. In addition, you are creating a multiple input elements on every element (I assume this is not the required behavior).

Your flow is basically:

- 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
...

Your code execution order is as follows (look at the comments):

  $(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
  });

You should change it to:

  $(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
  });

Which will make a correct flow of:

- 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
...

Answer 2

So far you have written correct, The only issue here is that your DOM doesn't know that it has to register all the events associated with new text box. simple after you append the textbox you have to activiate these events again. below should work

 $(document).ready(function(){ //1- document is ready $('#add').click(function(){ $("#createtextbox").append('<input type="text" class="datepicker" value="" />'); // you have added the textbox $('.datepicker').datepicker(); // call calender again this time it will pick the new added textbox }); });