Dynamic add class in 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,
});

Mamun · Accepted Answer · 2018-06-02 09:21:52Z

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>

Bourbia Brahim · Accepted Answer · 2018-06-02 09:17:05Z

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>

Collectives™ on Stack Overflow

Dynamic add class in jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related