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

Question

创建页面时我有一个只有一行的表格:

<TD><INPUT type="text" name="when"/></TD>

所以当用户点击这个元素时，会出现一个日期选择器:

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

当用户向该表添加新行时，我调用 setClass 函数在新行(所有行)上进行设置:

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

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

这是我添加行的方式:

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" class="add_remove_row" />

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 不会应用日期选择器，因为它知道它已经应用了。

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

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

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

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

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

UPDATED FIDDLE