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不会应用datepicker，因为它知道它已经应用了。

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

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

您已使用已在其上设置的班级hasDatepicker复制输入。所以Jquery不会实现这个插件。

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

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

UPDATED FIDDLE

Answer 2

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

datepicker插件将一个类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<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(row);
}

function setClass(newrow) {
    $(newrow).find('.hasDatepicker').removeAttr('id').removeClass('hasDatepicker').datepicker();
}

DEMO

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

2 个答案: