日期选择器在动态添加的行中不起作用

Datepicker not working in dynamically added row

本文关键字：不起作用 添加 选择器 动态 日期      更新时间：2023-09-26

当一行被动态添加到表中时，我不会让日期选择器、时间微调器或验证为第二行工作。

我添加行的代码。。。

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">

一旦元素被呈现到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({});
}

您需要.on（）

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

语法

$( 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
}
相关文章：