Quiero clonar la clasetcal
en el input FECHA
y la función foco
del mismo input, la clase es para convertir el input en calendario y la función para que al perder el foco pase al siguiente input, todo esto funciona correctamente en el la tabla base, pero al clonar no copia la función, he intentado hacerlo de la forma en la que copio las otras funciones y no me funciona, dejo todo el código para saber que estoy haciendo mal.
SCRIPT
function limpiar_valor(input){
if(input.tagName == 'INPUT'){
//Dejamos el valor en ''.
input.value = '';
}
}
function foco(CUENTA){
document.getElementById(CUENTA).focus();
}
$(function(){
// Clona la fila oculta que tiene los campos base
$("#adicional").on('click', function(){
//Tenemos que añadirle los eventos a los input de tipo text
var fila_clonada = $("#tabla tbody tr:eq(0)").clone().removeClass('fila-fija'),
//Los hijos 6, 8 y 10 son los que contienen los inputs que deberan tener los eventos.
celdas = fila_clonada[0].getElementsByTagName('td');
//Removemos los atributos a los inputs clonados.
limpiar_valor(celdas[0].getElementsByTagName('input')[0]);
limpiar_valor(celdas[6].getElementsByTagName('input')[0]);
limpiar_valor(celdas[8].getElementsByTagName('input')[0]);
limpiar_valor(celdas[10].getElementsByTagName('input')[0]);
//Añadimos la fila clonada
$("#tabla").append( fila_clonada );
});
// Evento que selecciona la fila y la elimina
$(document).on("click",".eliminar",function(){
var parent = $(this).parents().get(0);
$(parent).remove();
});
});
HTML
<link rel="stylesheet" type="text/css" href="tcal.css" /><script
type="text/javascript" src="tcal.js"></script>
<form method="post" action="" name="form">
<table class="table bg-info" id="tabla">
<tr class="fila-fija">
<td><input type="text" value="" name="FECHA[]" id="FECHA" class="tcal" onblur="foco('CUENTA');" />
</td>
<td align="center"><input value="" type="text" name="CUENTA[]" id="CUENTA" />
</td>
<td align="center"><input type="number" name="OT[]" id="OT" value=""/>
</td>
<td>
<select name="CIUDAD[]" id="CIUDAD" title="Ciudad">
<option value="">Selecciones...</option>
<option value="CALI">CALI</option>
<option value="JAMUNDI">JAMUNDI</option>
</select>
</td>
<td>
<select name="TIPO_ACTIVIDAD[]" id="TIPO_ACTIVIDAD" onchange='cargarSUBTIPO(this);'>
<option value="">Selecciones...</option>
<option value="Cambios de equipos">Cambios de equipos</option>
<option value="Control Remoto">Control Remoto</option>
</select>
</td>
<td>
<select name="SUBTIPO[]" id="SUBTIPO" disabled="disabled" onchange="seleccionado_SUBTIPO(this.value);">
<option value="">Selecciones...</option>
</select>
</td>
<td align="center"><input placeholder="Item" value="" type="text" name="ITEM_RE[]" id="ITEM_RE" onkeyup="cargar_precio(this.value.toUpperCase(), this.parentNode.parentNode.getElementsByTagName('td')[10].getElementsByTagName('input')[0]);"/>
</td>
<td>
<select name="OBSERVACIONES[]" id="OBSERVACIONES">
<option value="">Selecciones...</option>
<option value="Mover Toma">Mover Toma</option>
<option value="Extender Toma">Extender Toma</option>
</select>
</td>
<td align="center"><input placeholder="Cantidad" value="" type="number" name="CANTIDAD[]" id="CANTIDAD" onkeyup="operacion(this, this.parentNode.parentNode.getElementsByTagName('td')[10].getElementsByTagName('input')[0], this.parentNode.parentNode.getElementsByTagName('td')[6].getElementsByTagName('input')[0]);" title="cantidad" />
</td>
<td align="center"><input value="" type="text" name="OT_RECUPERADA[]" id="OT_RECUPERADA"/>
</td>
<td align="center"><input placeholder="Valor" value="" type="text" name="VALOR_RE_MO[]" id="VALOR_RE_MO"/>
</td><input type="hidden" name="USUARIO[]" id="USUARIO" value="<?php echo $_SESSION['MM_Username']; ?>">
<td class="eliminar">
<button>Eliminar src="../IMAGENES/eliminar3.png" style="width: 12px; height: 13px;">
</button>
</td>
<div class="btn-der" align="center">
<button id="adicional" name="adicional" type="button" class="btn btn-warning">+ Filas</button>
<input type="submit" name="insertar" id="insertar" value="Guardar" class="btn btn-info"/>
</div>
</form>
class="tcal"
y tú quieres que los elementos añadidos dinámicamente también tengan este comportamiento?tcal.js
cómo inicializar manualmente un elemento, porque esa "magia" de instanciar untcal
en cada elemento conclassName
tcal ocurre sólo cuando recién se renderea el DOM. No se aplica a los nodos insertados a posterioritcal.js
como te dije. Debe haber un método del tipo$('#contenedor').tcal();