生成 HTML 后重新加载 jQuery 插件 (datetimepicker)

Question

我在生成的 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();
});

在这种情况下，需要双击才能打开输入上的日期时间选择器插件。如果不双击，我找不到在新元素上加载插件的方法。

appendTo后有办法触发插件吗？谢谢！

Fiddle：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>

生成 HTML 后重新加载 jQuery 插件 (datetimepicker)

Reload jQuery plugin (datetimepicker) after generated HTML

jquery

datetimepicker

appendto