克隆行上的jquery Datepicker答案

【问题标题】：jquery Datepicker on clone rows克隆行上的jquery Datepicker
【发布时间】：2014-10-02 16:35:52
【问题描述】：

我正在使用 jquery 自带的 Datepicker...

new.php

<html>
<table id="testtable">
<tr id="table_row1">
<td><input type="text" name="date[]" class="pickDate"></td>
<td><?php ...some php stuff here...?> </td>
</tr>
</table>
<label onclick="cloneRow('testtable','table_row1')"></label>
</html>

index.php

<html>
<php
include('new.php')
?>
<script>
$(document).ready(function() {
$('.pickDate').each(function() {
    $(this).datepicker({ dateFormat: 'dd.mm.yy' });
});
});
</script>
</html>

用于克隆的javascript函数：

function cloneRow(tablename,rowname) {
var row = document.getElementById(rowname); // find row to copy
var table = document.getElementById(tablename); // find table to append to
var clone = row.cloneNode(true); // copy children too
clone.id = "newID"; // change id or other attributes/contents
table.appendChild(clone); // add new row to end of table
}

所以问题是，在第一行，日期选择器在那里，并且可以工作，但是如果我克隆该行，则克隆的行没有日期选择器。

我检查了这个类是否也被克隆了，是的。

我对 jquery 很陌生，但是 jquery 可能没有注意到已经添加了一个新行吗？

我怎样才能让它工作？

【问题讨论】：

我认为你必须在 cloneRow 函数之后再次运行 .each() 方法。
只需复制并粘贴 document.ready 下的 $(".pickDate").each 代码到 cloneRow 函数的末尾

标签： php jquery datepicker

【解决方案1】：

这里的问题是应用插件的代码只在页面加载时运行一次。每次克隆节点时都需要应用插件。另外，由于您已经有了 jQuery，我修改了代码以使用 jQuery 来操作元素。

function cloneRow(tablename,rowname) {
  var row = $("#" + rowname); // find row to copy
  var table = $("#" + tablename); // find table to append to
  var clone = row.clone(); // copy children too
  clone.attr("id", "newID"); // change id or other attributes/contents
  table.append(clone); // add new row to end of table
  clone.children(".pickDate").datepicker({ dateFormat: 'dd.mm.yy' });
}

【讨论】：

只要 jQuery 在执行之前已经包含在页面中，就可以。 jQuery 只是一个 javascript 库（$ 实际上只是全局范围内的一个函数），因此您可以像使用任何其他 javascript 一样使用它。