日期选择器在克隆行的第二行不起作用答案

【问题标题】：datepicker not working from second row on cloned rows日期选择器在克隆行的第二行不起作用
【发布时间】：2014-02-19 06:47:30
【问题描述】：

我正在尝试创建一个动态表，其中每一行都包含一个日期字段。我正在使用 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>

HTML：

<form name="pipeline" action="" method="post">
<TABLE id="data" class="dd" style="">

<tr><td style="text-align:center;"><b style="font-size: 14px;">Project Plan</b></td><td><input type="button" id="addnew" name="addnew" value="Add a Row" /></td></tr>
<tr><td><input type="text" class="datepicker" name="Internal_Deadline" /></td></tr>
<input type="hidden" id="items" name="items" value="1" /> 
</TABLE>
</form>

【问题讨论】：

标签： jquery html

【解决方案1】：

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

$(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
    });
});

顺便说一句，您不需要有两个 doc ready 处理程序，您可以按照此答案中建议的方式只放入一个。

Demo @ Fiddle

【讨论】：

【解决方案2】：

您需要再次初始化小部件

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();
    });
});

【讨论】：

【解决方案3】：

新元素没有实例化日期选择器。我向您推荐的是，在单击并创建一个新元素后，您将再次调用 datepicker。

类似这样的：

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

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

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

});

【讨论】：

【解决方案4】：

像这样更改脚本

$(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();

});
});

【讨论】：