刷新jQuery插件（的DateTimePicker）後生成HTML

Question

我有問題觸發的DateTimePicker上生成的html。插件是http://xdsoft.net/jqplugins/datetimepicker/

的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後的插件？謝謝 ！

小提琴：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>

編輯：從Muthupandianc的回答，我想補充一個appendTo中的額外div。現在，插件觸發，但是，當然，這並不針對輸入：https://jsfiddle.net/6guem9rx/3/

Answer 1

現在是工作的罰款與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

您只要致電appendTo功能後的DateTimePicker插件功能。

現在它的正常工作：

$('.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>