Reload jQuery plugin (datetimepicker) after generated HTML

Question

I am having issues to trigger datetimepicker on generated html. Plugin is datetimepicker from http://xdsoft.net/jqplugins/datetimepicker/

What I tried so far

$('#add_work_day').on('click', function() {
    nbr_line++;
    $('<input class="datetimepicker" type="text" name="working_sheet['+ nbr_line +'][start]" id="working_sheet" />').appendTo('.work_day_block');
    $('.datetimepicker').datetimepicker();
});

$('.work_day_block').on('click', 'input.datetimepicker', function() {
    $(this).datetimepicker();
});

In this case, it required a double click to open the datetimepicker plugin on the input. I can't find a way to load the plugin on new element, without a double click.

Is there anyway to trigger the plugin after appendTo? Thank you !

Fiddle: https://jsfiddle.net/6guem9rx/ (Sorry, I had to paste the full datetimepicker plugin, no https host)

$('.datetimepicker').datetimepicker();

var nbr_line = $('.work_day_block .1line').length;
$('#add_work_day').on('click', function() {
 nbr_line++;
 $('<input class="datetimepicker" type="text" name="working_sheet['+nbr_line+'][start]" value="" />').appendTo('.work_day_block');
 Initiate();
 return false;
});

function Initiate () {
 $('.datetimepicker').datetimepicker();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.1/jquery.datetimepicker.min.css" rel="stylesheet"/>
<script src="http://orugari.fr/dll/jquery.datetimepicker.min.js"></script>
<span id="add_work_day">Add</span>
<div class="row uniform 25% work_day_block" id="l0">
 <input class="datetimepicker" type="text" name="working_sheet[0][start]" value="" />
 
 </div>

EDIT: From Muthupandianc's answer, I would like to add an extra div in the appendTo. Now plugin trigger but, of course does not target the input: https://jsfiddle.net/6guem9rx/3/

Answer 1

Now is working fine with extra div in appendTo.

$('.datetimepicker').datetimepicker();

    var nbr_line = $('.work_day_block .1line').length;
    $('#add_work_day').on('click', function() {
     nbr_line++;
     $('<div class="1lin"><input class="datetimepicker" type="text" name="working_sheet['+nbr_line+'][start]" value="" /></div>').appendTo('.work_day_block');
     
     return false;
    });

$(document).on("click", "input", function() {
  $(this).datetimepicker().datetimepicker( "show" )
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.1/jquery.datetimepicker.min.css" rel="stylesheet"/>
    <script src="http://orugari.fr/dll/jquery.datetimepicker.min.js"></script>
    <span id="add_work_day">Add</span>
    <div class="row uniform 25% work_day_block" id="l0">
     <input class="datetimepicker" type="text" name="working_sheet[0][start]" value="" />
     
     </div>

Answer 2

You just call datetimepicker plugin function after appendTo function.

Now it's working fine:

$('.datetimepicker').datetimepicker();

var nbr_line = $('.work_day_block .1line').length;
$('#add_work_day').on('click', function() {
 nbr_line++;
 $('<input class="datetimepicker" type="text" name="working_sheet['+nbr_line+'][start]" value="" />').appendTo('.work_day_block').datetimepicker();
 
 return false;
});

   

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.1/jquery.datetimepicker.min.css" rel="stylesheet"/>
<script src="http://orugari.fr/dll/jquery.datetimepicker.min.js"></script>
<span id="add_work_day">Add</span>
<div class="row uniform 25% work_day_block" id="l0">
 <input class="datetimepicker" type="text" name="working_sheet[0][start]" value="" />
 
 </div>