validacion - validar formulario html javascript

No se puede hacer referencia al elemento creado dinámicamente por su nombre

Question

Tengo una tabla con una fila cuando se crea la página:

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

Entonces, cuando el usuario hace clic en este elemento, aparece un selector de fecha:

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

Cuando el usuario agrega una nueva fila a esta tabla, llamo a la función setClass para establecer esto en la nueva fila (todas las filas):

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

Pero esto no funciona en estas filas creadas dinámicamente. ¿Por qué?

Así es como agrego las filas:

<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

Solo debe inicializar el complemento en los elementos recién agregados. Sin embargo, debes tomar algunas acciones especiales.

El complemento datepicker coloca una clase hasDatepicker en los elementos que ya ha inicializado, y no los reinicializa. Como está copiando un elemento que tiene esta clase, debe eliminarlo para que se reinicialice. En segundo lugar, si el elemento no tiene una ID, datepicker le agrega una ID aleatoria. Los ID deben ser únicos, pero su código está copiando el ID. En mi código a continuación, simplemente elimino la ID de los elementos, por lo que el complemento agregará uno nuevo y único. Si no hiciera esto, el marcador de fecha en una nueva fila llenaría la primera fila (porque usa la ID internamente cuando encuentra la entrada para actualizar después de seleccionar algo del selector de fecha).

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

MANIFESTACIÓN

Answer 2

¡¡Lo tengo!!

El problema es que cuando se aplica un hasDatepicker fecha y hora del plugin de Jquery a un elemento, se establece una clase en la entrada llamada hasDatepicker .

Cuando vuelve a llamar al complemento, primero comprueba si la clase ya existe ... Si lo hace, entonces Jquery no aplica el marcador de fecha, porque entiende que ya está aplicado.

Como está copiando el innerHTML de la celda preexistente:

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

estás copiando la entrada con la clase hasDatepicker ya configurada en ella. Entonces Jquery no implementará el complemento.

Una solución simple es eliminar la clase antes de la llamada datepicker :

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

FIDDLE ACTUALIZADO