Datepicker仅更改表格第一行中的日期

我的日期选取器仅更改表格第一行中的日期。 我创建了一行表，然后当一个人点击add时，克隆该行并将其附加到表中。 datepicker在克隆后工作，但只更改第一行中的值。 只有在每次克隆行时销毁和部署datepicker，才会发生这种情况，否则datepicker只能在我表的第一行中运行。

有帮助吗？

谢谢

HTML代码

使用Javascript

 $('#add-row').on('click', function (e) { e.preventDefault(); //datepicker does not work witout being created and destroyed on each row. //$('.datepicker').datepicker('destroy'); var tableBody = $('#periodsTable > tbody'); var lastRowClone = $('tr:last-child', tableBody).clone(); //setting periodId to -1 for any created periods $('td:first input[name=periodIds]', lastRowClone).val("-1"); tableBody.append(lastRowClone); //$(".datepicker").datepicker(); }); 

Answer 1

当您通过将DatePicker小部件添加到具有class datepicker的元素来启动DatePicker小部件时，它将仅适用于该时刻属于该页面的元素。

对于第一次调用后添加的每个其他元素：

 $('.datepicker').datepicker(); 

在您的click事件处理程序中会发生这种情况，您需要将DatePicker添加到它们中，即使它们也有class datepicker 。 它们是页面中的新元素，因此：

 $(function () { // Adding DatePicker to the elements already in the page. $('.datepicker').datepicker(); $('#add-row').on('click', function (e) { e.preventDefault(); var tableBody = $('#periodsTable > tbody'); var lastRowClone = $('tr:last-child', tableBody).clone(); //setting periodId to -1 for any created periods $('td:first input[name=periodIds]', lastRowClone).val("-1"); tableBody.append(lastRowClone); // Adding DatePicker to the new element added to the page. // As the cloned element has the class hasDatepicker already there, // DatePicker thinks it's initialised for it. // You need to remove this class before adding DatePicker to it. lastRowClone.find('.datepicker').attr('id','').removeClass('hasDatepicker').datepicker(); }); }); 

注意：就像我在评论中提到的那样，要注意元素ID不能重复。 页面中的每个ID都应该是唯一的。 否则，您的标记将无效，并且指向该ID的任何jQuery选择器将仅返回第一次出现，并将忽略其余的。

注意2：您的inputs type设置为date 。 在现代浏览器中，这将导致HTML 5本机日历和jQuery DatePicker日历之间发生冲突。

注3：您的第二个input没有设置class datepicker 。

注意4：虽然您可能在HTML标记中看不到任何重复的ID ，但DatePicker在添加元素时为元素提供随机ID ，如果元素没有。 当您克隆此元素时，您正在创建一个共享此相同ID的新元素，这将导致DatePicker始终在第一个input设置Date 。 找到一种方法来为您的元素提供正确且唯一的IDs以避免此问题和许多其他问题。

演示