添加新行,将日期选择器绑定到cloumn以一种奇怪的方式工作
Adding new row, binding of datepicker to cloumn works in weird manner
我正试图在单击按钮时添加新行。在我的新行中,有一个文本框,我想与它绑定日期选择器,但无法绑定。请帮助我解决此问题。
<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:AddRow=>点击newRow的文本框,日历弹出,一切正常。
序列2:1.单击文档,然后尝试原始行的文本框,然后弹出日历。2.添加新行。3.现在点击新行的文本框,日历永远不会弹出选择日期。
附上JSFiddle以供参考http://jsfiddle.net/wAyhm/9/
这就是您想要的:
如何克隆已被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();
}
相关文章:
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 有没有一种方法可以添加相同的项目val=“0”;4〃;到JavaScript中数组的每个对象
- 有没有一种方法可以让jQuery日期选择器在没有年份的情况下工作
- JS滑块计数器不工作..需要找到一种方法使其正常工作
- Javascript hide/show 切换在 Opera 中是双向的,但在其他浏览器中只能以一种方式工作
- AngularJS - CSS 动画只能以一种方式工作
- JavaScript排序函数是如何工作的(作为一种算法)
- Javascript函数以一种意想不到的方式工作
- Javascript-目标DOM在一种情况下工作,而不是在另一种情况
- 添加新行,将日期选择器绑定到cloumn以一种奇怪的方式工作
- 在IE中获得插入符号位置在一种情况下工作,在另一种情况下不工作
- 节点调度是一种类似cron的调度方法,在本地工作,但在生产中不起作用
- 一种获取工作表第一行/标题中值的列的方法
- 在Firefox上禁用JavaScript意味着我的按钮不能工作,是否有一种方法可以让按钮工作?
- 我需要为手风琴换一种颜色;我在一起工作
- Jquery动画以一种方式工作,而不是另一种方式
- Scala到JS的加密不起作用,但另一种方式工作得很好
- 是否有一种简单的方法可以让Lowpro与IE9一起工作?
- 警报框以一种方式工作,而不是以另一种方式
- 为什么相同的代码在另一种形式下可以工作而不能工作