在选择具有"add a row"功能的另一个日期文本框时自动选择日期

Question

我一直在尝试显示另一个日期字段的日期，并选择当前字段的日期。它仅适用于第一行。下面是代码：

Javascript：

<script type='text/javascript'>
//<![CDATA[
$(function(){
$('.one').datepicker({
onSelect: function(date){
  var date2 = $('.one').datepicker('getDate');
  date2.setDate(date2.getDate()+1);
  $('.two').datepicker('setDate', date2);
}
})
$('.two').datepicker({})
});
$(document).ready(function() {
var currentItem = 1;
$(".datepicker").datepicker();
$('#addnew').click(function(){
currentItem++;
$('#items').val(currentItem);
var strToAdd = '<tr><td style=""><input type="text" name="task'+currentItem+'" id="task'+currentItem+'" value="" /></td><td style=""><input type="text" name="Description'+currentItem+'" id="Description'+currentItem+'" value="" /></td><td style="width: 160px;"><input type="text" class="one datepicker" name="Internal_Deadline'+currentItem+'" id="Internal_Deadline'+currentItem+'" /></td><td style=""><input type="text" class="two datepicker" name="Client_Deadline'+currentItem+'" id="Client_Deadline'+currentItem+'" /></td><td style=""><input type="text" class="datepicker" name="Actual_Deadline'+currentItem+'" id="Actual_Deadline'+currentItem+'" /></td><td style="width:83px;"></td></tr>';
 $('#data').append(strToAdd);
   $(".datepicker").datepicker(); 
  });
  });
  //]]>
  </script>

.HTML：

<TABLE id="data" class="dd" style="">
    <TR>
    <td style=""><input type="text" name="task1" id="task1" value="" /></td><td style=""><input type="text" name="Description1" id="Description1" value="" /></td><td style="width: 160px;"><input type="text" class="one datepicker" name="Internal_Deadline1" id="Internal_Deadline1" value="" /></td><td><input type="text" class="two datepicker" name="Client_Deadline1" id="Client_Deadline1" value="" /></td><td style=""><input type="text" class="datepicker" name="Actual_Deadline1" id="Actual_Deadline1" value="" />             </td><td style="width: 83px;"></td></tr>
    <input type="hidden" id="items" name="items" value="1" /> 
    </TABLE>

Answer 1

您需要后期绑定才能处理稍后将添加的 DOM 元素的事件：

    $(function () {
        $('.one').datepicker();
        $('#data').on('change', '.one', function (date) {                
            var date2 = $(this).datepicker('getDate');
            date2.setDate(date2.getDate() + 1);                
            $(this).parent('td').next('td').find('.two').datepicker('setDate', date2);                                
        });
        $('.two').datepicker();
    });