添加新行，将datepicker绑定到cloumn以奇怪的方式工作

我想在按钮点击上添加一个新行。 在我的新行中有一个Textbox，我想用它绑定datepicker但不能。 请帮我解决这个问题。

 
 
Add
 
 
 
 
 
  

JavaScript的

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

Seq1：添加行=>单击newRow的文本框，弹出日历，一切正常。

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

附加JSFiddle以供参考http://jsfiddle.net/wAyhm/9/

Answer 1

这就是你要找的东西：

如何克隆已被jQuery UI Widget绑定的元素？

工作小提琴：

http://jsfiddle.net/Meligy/DKtA6/6/

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