Question

我正在尝试创建一个包含onedate字段的每一行的动态表。我正在使用Jquery datepicker。出于某种原因，只有第一行显示在日期选择器日历中。其他动态创建的字段未显示日历。我应该提一下，当加载此页面时，默认情况下第一行就位。仅从第二行开始动态创建。

使用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>

Answer 1

您必须将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
    });
});

顺便说一下，你不需要有两个doc ready处理程序，只需按照本答案中建议的方式输入。{/ p>

Demo @ Fiddle

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

Answer 3

像这样更改脚本

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

});
});

Answer 4

新元素未实例化datepicker。我建议您在点击并创建新元素后再次调用datepicker。

这样的事情：

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

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

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

});

datepicker无法在克隆行的第二行中运行

4 个答案:

Demo @ Fiddle