添加新行，将datepicker绑定到cloumn以奇怪的方式工作 [英] Adding new row, binding of datepicker to cloumn works in weird manner

问题描述

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

 < table> 
< tr> 
< td>< button type =buttononClick =addRow（this）>添加< / button>< / td> 
< / tr> 
< tr> 
< td>< input type =textname =installDatevalue =class =date/> < / td> 
< / tr> 
< / table> 
  

JavaScript

  $（document）.on（'click'，function（）{
 $（'。date'）。each（function（）{
 $（this）.datepicker（）; 
}）; 
}）; 
 
函数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（）; //修复问题的代码
} 
  

Seq1：Add Row =>点击文本框newRow，calender弹出，一切正常。

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

附加JSFiddle参考
http： /jsfiddle.net/wAyhm/9/

解决方案

这是你正在寻找的：

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

工作小提琴：

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

 窗口。 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（）; 
} 
  

I am trying to add a new row on button click. In my new row there is one Textbox with which I want to bind datepicker but not able to. Please help me to resolve this issue.

<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>

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: Add Row => Click on textbox of newRow, calender pops up and everything works fine.

Seq2: 1. Click on document and then try on textbox of original row, then calender pops up. 2. Add new row. 3. now click on textbox of new row, calender never pops up to select the date.

Attaching JSFiddle for reference http://jsfiddle.net/wAyhm/9/

解决方案

This is what you are looking for:

How to clone elements that have been bound by a jQuery UI Widget?

Working fiddle:

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

这篇关于添加新行，将datepicker绑定到cloumn以奇怪的方式工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！