无法按名称引用动态创建的元素

创建页面时，我有一个包含一行的表：

因此，当用户点击此元素时，会显示一个日期选择器：

 $(document).ready(function() { $('[name="when"]').datepicker(); }); 

当用户向该表添加一个新行时，我调用setClass函数在新行（所有行）上设置它：

 function setClass() { $('[name="when"]').datepicker(); } 

但这不适用于这些动态创建的行。 为什么？

这是我添加行的方式：

  function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var colCount = table.rows[1].cells.length; for(var i=0; i<colCount; i++) { var newcell = row.insertCell(i); newcell.innerHTML = table.rows[1].cells[i].innerHTML; switch(newcell.childNodes[0].type) { case "text": newcell.childNodes[0].value = ""; break; case "checkbox": newcell.childNodes[0].checked = false; break; case "select-one": newcell.childNodes[0].selectedIndex = 0; break; } } setClass(); } 

Answer 1

得到它了！！

问题是当一个Jquery的插件datepicker应用于一个元素时，一个类被设置为一个名为hasDatepicker的输入。

当你再次调用插件时，它首先检查该类是否已经存在…如果确实如此，那么Jquery不会应用datepicker，因为它知道它已经被应用了。

因为您要从预先存在的单元格中复制innerHTML ：

 newcell.innerHTML = table.rows[1].cells[i].innerHTML; 

你正在使用hasDatepicker类已经设置的输入复制输入。 所以Jquery不会实现这个插件。

一个简单的解决方法是在datepicker调用之前删除该类：

 var setClass = function() { $('[name="when"]').removeClass("hasDatepicker").datepicker(); } 

更新的FIDDLE

Answer 2

您应该只在新添加的元素上初始化插件。 但是，你需要采取一些特殊的行动。

hasDatepicker插件将一个类hasDatepicker放在已经初始化的元素上，并且不会重新初始化它们。 由于您要复制具有此类的元素，因此需要将其删除以便重新初始化。 其次，如果元素没有ID，则datepicker会为其添加随机ID。 ID必须是唯一的，但您的代码正在复制ID。 在我下面的代码中，我只是从元素中删除ID，因此插件将添加一个新的，唯一的。 如果我没有这样做，新行上的日期选择器将填充第一行（因为它在您从datepicker中选择内容后找到要更新的输入时在内部使用ID）。

 function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var colCount = table.rows[01].cells.length; for(var i=0; i 

DEMO