jQuery中的动态添加类

Question

I want to add date picker dynamically in input field using jquery. It works for 1st text field. When I add a field it does not work. How can I fix that? Thanks In advance.

<table class="table table-bordered" id="dynamic_field">
    <tr>
       <td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td>
       <td><input type="text" class="startdate form-control"/></td>
       <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
    </tr>
</table>

Jquery

$(document).ready(function(){
var i=1;
$('#add').click(function(){
    i++;
    $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td><td><input type="text" class="startdate form-control"/></td>
  <td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
  });

$(document).on('click', '.btn_remove', function(){
    var button_id = $(this).attr("id"); 
    $('#row'+button_id+'').remove();
  });   
});

datepicker

 $( ".startdate" ).datepicker({
  dateFormat: 'dd/mm/yy',
  changeMonth: true,
  changeYear: true,
  minDate: 0,
});

Answer 1

To implement datepicker on dynamically created input use on() . Please also notice the use of Template literals inside append() which is more cleaner and simpler:

 $(document).ready(function(){ var i=1; $('#add').click(function(){ i++; $('#dynamic_field').append(`<tr id="row${i}"><td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td><td><input type="text" class="startdate form-control"/></td> <td><button type="button" name="remove" id="${i}" class="btn btn-danger btn_remove">X</button></td></tr>`); }); $(document).on('click', '.btn_remove', function(){ var button_id = $(this).attr("id"); $('#row'+button_id+'').remove(); }); }); $(document).on("focus", ".startdate", function(){ $(this).datepicker({ dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true, minDate: 0, }); }); 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <table class="table table-bordered" id="dynamic_field"> <tr> <td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td> <td><input type="text" class="startdate form-control"/></td> <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td> </tr> </table> 

Answer 2

Add simply a datepicker() function to your last created input ,

using

$('#dynamic_field').last("tr").find(".startdate").datepicker({
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    minDate: 0,
  });

also ,when removing this input you have also to destroy datepicker attached to it as below

  $( '#row' + button_id ).datepicker( "destroy" );
  $( '#row' + button_id ).removeClass("hasDatepicker").removeAttr('id');

See below Snippet :

 $(function() { var i = 1; $('#add').click(function() { i++; $('#dynamic_field').append('<tr id="row' + i + '"><td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td><td><input type="text" class="startdate form-control"/></td> <td > <button type = "button" name = "remove"id = "' + i + '" class = "btn btn-danger btn_remove" > X </button></td ></tr>'); $('#dynamic_field').last("tr").find(".startdate").datepicker({ dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true, minDate: 0, }); }); $(".startdate").datepicker({ dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true, minDate: 0, }); $(document).on('click', '.btn_remove', function() { var button_id = $(this).attr("id"); $( '#row' + button_id ).datepicker( "destroy" ); $( '#row' + button_id ).removeClass("hasDatepicker"); $('#row' + button_id+'' ).remove(); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.css" rel="stylesheet" /> <table class="table table-bordered" id="dynamic_field"> <tr> <td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td> <td><input type="text" class="startdate form-control" /></td> <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td> </tr> </table>