Javascript 添加新行时，将datepicker绑定到cloumn的方式很奇怪

我试图在单击按钮时添加新行。在我的新行中有一个文本框，我想用它绑定datepicker，但无法绑定。请帮我解决这个问题

<table>
     <tr>
     <td><button type="button" onClick ="addRow(this)">Add</button></td>
     </tr>
     <tr>
     <td><input type="text" name="installDate" value="" class ="date"/> </td>        
     </tr>
</table>

Seq1:AddRow=>点击newRow的文本框，日历弹出，一切正常

序号2： 1.单击文档，然后尝试原始行的文本框，然后日历弹出。 2.添加新行。 3.现在点击新行的文本框，日历永远不会弹出来选择日期

附加JSFIDLE以供参考

---

这就是您要寻找的：

工作小提琴：

---

这就是您正在寻找的：

工作小提琴：

---

谢谢你的帮助。事实上，我需要克隆列，相同的解决方案也适用于列克隆吗？好的，应该可以，重要的部分是在克隆之后。复制

数据

属性，创建唯一的ID，然后将

ID

和此

输入

属性映射到新的文本框克隆。感谢您的帮助。事实上，我需要克隆列，相同的解决方案也适用于列克隆吗？好的，应该可以，重要的部分是在克隆之后。复制

数据

属性，创建唯一ID，然后将

ID

和该

输入

属性映射到新的文本框克隆。

$(document).on('click', function() {
$('.date').each(function() {
        $(this).datepicker();
});
});

function addRow(btn) {         
    var parentRow = btn.parentNode.parentNode;
    var table = parentRow.parentNode;
    var rowCount = table.rows.length;
    var lastRow = table.rows[rowCount - 1];
    var rowClone = lastRow.cloneNode(true);
    table.appendChild(rowClone);
    $('.date', rowClone).datepicker(); // Code to fix the problem
}

window. addRow = function addRow(btn) {         
    var parentRow = btn.parentNode.parentNode;
    var table = parentRow.parentNode;
    var rowCount = table.rows.length;
    var lastRow = table.rows[rowCount - 1];
    var lastDatePicker = $('.date', lastRow);
    var rowClone = $(lastRow).clone(true);
    var datePickerClone = $('.date', rowClone);
    var datePickerCloneId = 'test-id' + rowCount;
    datePickerClone.data( "datepicker", 
        $.extend( true, {}, lastDatePicker.data("datepicker") ) 
    ).attr('id', datePickerCloneId);
    datePickerClone.data('datepicker').input = datePickerClone;
    datePickerClone.data('datepicker').id = datePickerCloneId;
    $(table).append(rowClone);
    datePickerClone.datepicker();
}