Question

即时使用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
}

所以问题是，在第一行，datepicker就在那里，并且有效，但是如果我克隆该行，那么克隆的行就没有datepicker。

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

我对jquery很新，但是jquery可能没注意到添加了新行吗？

我怎样才能让它发挥作用？

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

1 个答案: