insert date picker in the new appended row

Question

how to insert date picker in a newly appended row using jquery.

$(document).on('click', '.fa-plus-square', function () {
   var row = $('.installment').html();
   $('.payment').append('<div class="form-group"><div class="row vertical-offset-10">' + row + '</div></div>');
   $(row).find('.installment_date').datepicker();
});

I used this code but it's not working.

Possible duplicate of: http://stackoverflow.com/questions/10433154/putting-datepicker-on-dynamically-created-elements-jquery-jqueryui — Cagy79, Feb 21 '17 at 10:12
Possible duplicate of [putting datepicker() on dynamically created elements - JQuery/JQueryUI](http://stackoverflow.com/questions/10433154/putting-datepicker-on-dynamically-created-elements-jquery-jqueryui) — BENARD Patrick, Feb 21 '17 at 10:42

score 1 · Answer 1 · answered Feb 21 '17 at 11:30

Hello Dear Please Try Below Code!

$(document).on('click', '.fa-plus-square', function () {
   var row = $('.installment').html();
   $('.payment').append('<div class="form-group"><div class="row vertical-offset-10">' + row + '</div></div>');
   $('.payment').find('.installment_date:last').datepicker();
});

Hope It's work for You :)

Problem is, u initialize datepicker in "installment" Class But u want to initialize datepicker after append div

score 0 · Answer 2 · answered Feb 21 '17 at 10:33

Check This script :

$(function() {
  $("#add").click(function() {
   var data = '<p>Date: <input class="datepicker" type="text"></p>';
   $('#append').append(data);
  });
 $(document).on('click', '.datepicker', function() {
  $( this ).datepicker();
 });
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="demo">

<p>Date: <input class="datepicker" type="text"></p>
</div>
<div id="append"></div>
<button id="add">Add button</button>

insert date picker in the new appended row

2 Answers2

Check This script :