Datepicker无法动态添加行

Question

When a row is added dynamically in a table, I don't get the datepicker,time spinner or the validations working for the second row.

my code for adding a row...

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;

  }
}

and my code for the button is

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

Answer 1

You need .on()

As elements are added dynamically you can not bind events directly to them .So you have to use Event Delegation .

Syntax

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

---

Add validation code using Event Delegation.

---

Update

 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

You need to initialize the plugins/widgets for dynamic elements once the elements are rendered to the 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
}

use clone

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({});
}