1

我正在尝试在按钮单击时添加新行。在我的新行中，有一个文本框，我想与它绑定 datepicker 但无法绑定。请帮我解决这个问题。
HTML 代码

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

Java 脚本：

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

编辑：当我添加代码“$('.date', rowClone).datepicker();”时。有一个奇怪的问题。Seq1: Add Row => 点击 newRow 的文本框，弹出日历，一切正常。
Seq2: 1. 点击原行文本框的文本框，没有任何弹出。
2. 点击文档，然后在原行的文本框上试一下，会弹出日历。
3. 添加新行。
4.现在点击新行的文本框，日历永远不会弹出选择日期。

任何帮助深表感谢。该场景的 JSFiddle 如下：

http://jsfiddle.net/wAyhm/9/

对于工作解决方案，请点击以下链接： 添加新行，将 datepicker 绑定到 cloumn 以奇怪的方式工作

4

2 回答 2

1

用作选择rowClone器中的上下文，您可以抓取.date元素以应用日期选择器：

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();
}
于 2013-06-24T17:44:55.327 回答
0 
$('.datepicker').on('focusin', '.datepicker', function(e) {
    $(this).datepicker();
});
于 2013-06-24T17:44:34.373 回答