Перезапустить плагин jQuery (datetimepicker) после сгенерированного HTML

Question

У меня возникли проблемы с запуском datetimepicker на сгенерированном html. Плагин DateTimePicker от http://xdsoft.net/jqplugins/datetimepicker/

То, что я пытался до сих пор

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

В этом случае требуется двойной щелчок, чтобы открыть DateTimePicker плагин на входе. Я не могу найти способ загрузить плагин на новый элемент без двойного щелчка.

Есть ли способ запустить плагин после appendTo? Спасибо ! не

Fiddle: https://jsfiddle.net/6guem9rx/ (К сожалению, я должен был вставить полный DateTimePicker плагин, не HTTPS хост)

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

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

 
function Initiate() { 
 
\t $('.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: От ответа Muthupandianc, я хотел бы добавить дополнительный div в appendTo. Теперь триггер плагина, но, конечно, не предназначен для ввода: https://jsfiddle.net/6guem9rx/3/

Answer 1

Теперь работает нормально с дополнительной DIV в appendTo.

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

 
    var nbr_line = $('.work_day_block .1line').length; 
 
    $('#add_work_day').on('click', function() { 
 
    \t nbr_line++; 
 
    \t $('<div class="1lin"><input class="datetimepicker" type="text" name="working_sheet['+nbr_line+'][start]" value="" /></div>').appendTo('.work_day_block'); 
 
    \t 
 
    \t 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

Вы просто вызываете функцию плагина datetimepicker после функции appendTo.

Теперь это прекрасно работает:

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

 
var nbr_line = $('.work_day_block .1line').length; 
 
$('#add_work_day').on('click', function() { 
 
\t nbr_line++; 
 
\t $('<input class="datetimepicker" type="text" name="working_sheet['+nbr_line+'][start]" value="" />').appendTo('.work_day_block').datetimepicker(); 
 
\t 
 
\t 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>