Aggiungendo una nuova riga, l’associazione di datepicker a cloumn funziona in modo strano

Sto cercando di aggiungere una nuova riga sul clic del pulsante. Nella mia nuova riga c’è una casella di testo con cui voglio associare datepicker ma non in grado di farlo. Per favore aiutami a risolvere questo problema.

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: Aggiungi riga => Fai clic sulla casella di testo di newRow, il calendario si apre e tutto funziona correttamente.

Seq2: 1. Fare clic sul documento e quindi provare sulla casella di testo della riga originale, quindi viene visualizzato il calendario. 2. Aggiungi nuova riga. 3. ora fai clic sulla casella di testo della nuova riga, il calendario non si apre mai per selezionare la data.

Albind JSFiddle come riferimento http://jsfiddle.net/wAyhm/9/

Questo e ciò che stai cercando:

Come clonare gli elementi che sono stati associati a un widget dell’interfaccia utente di jQuery?

Lavoro di violino:

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