Jquery 日期选择器无法从克隆行的第二行开始工作

我试图创建一个动态表，每一行都包含onedate字段。我正在使用Jquery日期选择器。由于某些原因，日期选择器日历中只显示第一行。其他动态创建的字段不显示日历。我应该提到的是，在加载此页面时，默认情况下第一行已就位。仅从第二行动态创建

Javascript:

<script type='text/javascript'>
$(function() {
$( ".datepicker" ).datepicker();
});

$(document).ready(function() {
var currentItem = 1;
$('#addnew').click(function(){
currentItem++;
$('#items').val(currentItem);
var strToAdd = '<tr><td><input type="text" class="datepicker" name="Internal_Deadline'+currentItem+'" id="Internal_Deadline'+currentItem+'" /></td></tr>';
$('#data').append(strToAdd);

});
});

</script>

$（函数（）{
$（“.datepicker”）.datepicker（）；
});
$（文档）.ready（函数（）{
var currentItem=1；
$（'#addnew'）。单击（函数（）{
currentItem++；
$（'项目'）.val（当前项目）；
var strToAdd=''；
$（“#数据”）.append（strToAdd）；
});
});

Html:

项目计划

像这样更改脚本

$(document).ready(function() {
var currentItem = 1;
$('#addnew').click(function(){
currentItem++;
$('#items').val(currentItem);
var strToAdd = '<tr><td><input type="text" class="datepicker"    name="Internal_Deadline'+currentItem+'" id="Internal_Deadline'+currentItem+'" /></td></tr>';
$('#data').append(strToAdd);
$(.datepicker).datepicker();

});
});

$（文档）.ready（函数（）{
var currentItem=1；
$（'#addnew'）。单击（函数（）{
currentItem++；
$（'项目'）.val（当前项目）；
var strToAdd=''；
$（“#数据”）.append（strToAdd）；
$（.datepicker.datepicker（）；
});
});

您需要再次初始化小部件

jQuery(function ($) {
    $(".datepicker").datepicker();
});

jQuery(function ($) {
    var currentItem = 1;
    $('#addnew').click(function () {
        currentItem++;
        $('#items').val(currentItem);
        var strToAdd = '<tr><td><input type="text" class="datepicker" name="Internal_Deadline' + currentItem + '" id="Internal_Deadline' + currentItem + '" /></td></tr>';
        //notice the use of appendTo() so that we can get the newly added element back
        var $row = $(strToAdd).appendTo('#data');
        //initialize the datepicker widget for the .datepicker elements within the newly added rows
        $row.find('.datepicker').datepicker();
    });
});

jQuery（函数（$）{
$（“.datepicker”）.datepicker（）；
});
jQuery（函数（$）{
var currentItem=1；
$（'#addnew'）。单击（函数（）{
currentItem++；
$（'项目'）.val（当前项目）；
var strToAdd=''；
//注意appendTo（）的用法，这样我们就可以取回新添加的元素
var$row=$（strToAdd）.appendTo（“#数据”）；
//初始化新添加行中.datepicker元素的datepicker小部件
$row.find（'.datepicker'）.datepicker（）；
});
});

新元素没有实例化datepicker。我向您推荐的是，在单击并创建新元素之后，您将再次调用datepicker

大概是这样的：

$('.btn').on('click',function(){

  //append element
   $('#target').append('<input />' , {'type' : 'input' , 'class' : 'datepicker'});

  //make them date picker
  $( ".datepicker" ).datepicker();

});

$（'.btn'）。在（'click'，function（）上{
//附加元素
$（'#target'）.append（''，{'type'：'input'，'class'：'datepicker'}）；
//让他们选日期
$（“.datepicker”）.datepicker（）；
});

必须将日期选择器初始化为新添加的元素：

$(document).ready(function () {
    var currentItem = 1;
    $(".datepicker").datepicker();
    $('#addnew').click(function () {
       currentItem++;
       $('#items').val(currentItem);
       var strToAdd = '<tr><td><input type="text" class="datepicker" name="Internal_Deadline' + currentItem + '" id="Internal_Deadline' + currentItem + '" /></td></tr>';
       $('#data').append(strToAdd);
       $(".datepicker").datepicker(); // <------here initialize the datepicker
    });
});

$（文档）.ready（函数（）{
var currentItem=1；
$（“.datepicker”）.datepicker（）；
$（'#addnew'）。单击（函数（）{
currentItem++；
$（'项目'）.val（当前项目）；
var strToAdd=''；
$（“#数据”）.append（strToAdd）；
$（“.datepicker”）.datepicker（）//
$(document).ready(function () {
    var currentItem = 1;
    $(".datepicker").datepicker();
    $('#addnew').click(function () {
       currentItem++;
       $('#items').val(currentItem);
       var strToAdd = '<tr><td><input type="text" class="datepicker" name="Internal_Deadline' + currentItem + '" id="Internal_Deadline' + currentItem + '" /></td></tr>';
       $('#data').append(strToAdd);
       $(".datepicker").datepicker(); // <------here initialize the datepicker
    });
});