生成 HTML 后重新加载 jQuery 插件（datetimepicker）

Question

我在生成的 html 上触发 datetimepicker 时遇到问题。插件是来自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() {
	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>

编辑： 根据 Muthupandianc 的回答，我想在 appendTo 中添加一个额外的 div。现在插件触发器，但当然不针对输入：https://jsfiddle.net/6guem9rx/3/

Answer 1

你只需在 appendTo 函数之后调用 datetimepicker 插件函数。

现在一切正常：

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

Answer 2

现在可以在 appendTo 中使用额外的 div。

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