生成HTML

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>