Question

当在表中动态添加行时，我没有得到datepicker，time spinner或第二行的验证。

我添加行的代码......

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

  for(var i = 0;i<colCount;i++){

     var newccell = row.insertCell(i);
     newcell.innerHTML = table.rows[i].cells[i].innerHTML;

  }
}

我的按钮代码是

<input type = "button" onclick = "addRow(tableID)" name="+" value="+" id="add">

Answer 1

您需要.on()

由于元素是动态添加的，因此无法将事件直接绑定到它们。因此，您必须使用Event Delegation。

语法

$( elements ).on( events, selector, data, handler );

<小时/> 使用事件委派添加验证代码。

更新

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
    for (var i = 0; i < colCount; i++) {
        var newccell = row.insertCell(i);
        newcell.innerHTML = table.rows[i].cells[i].innerHTML;
    }
    var $row = $(row);
    $row.find('input.sp').spinner(); //find element which you want to add spinner
    $row.find('input.dp').datepicker();//find element which you want to add datepicker
}

Answer 2

一旦元素呈现为dom，您需要初始化动态元素的插件/小部件

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
    for (var i = 0; i < colCount; i++) {
        var newccell = row.insertCell(i);
        newcell.innerHTML = table.rows[i].cells[i].innerHTML;
    }

    var $row = $(row);
    $row.find('input.spinner').spinner(){};//initialize spinner
    $row.find('input.datepicker').datepicker({});//iniitailze datepicker etc
}

使用克隆

function addRow(tableID) {
    var $table = $('#' + tableID),
        $first = $table.find('tr').first();
    var $row = $first.clone().appendTo($table)
    $row.find('input.spinner').spinner() {};
    $row.find('input.datepicker').datepicker({});
}

Datepicker无法动态添加行

2 个答案: