Resulta que tengo una tabla con un body vacio, la cual es asi:
TABLA
<table class="table tablaRollo table-responsive table-striped table-bordered table-sm">
<thead class="thead-dark">
<tr>
<th scope="col">Laminas Cortadas</th>
<th scope="col">Largo Laminas m.m.</th>
<th scope="col" width="300px">Total Cortado</th>
</tr>
</thead>
<tbody></tbody>
</table>
Tengo un boton el cual me agrega una nueva fila, cada fila tiene la misma clase mas un contador interno para distinguirlas, por ejemplo cuando agrego la primera fila, esta en un input
tenda la clase largo0
, cuando agregue la segunda fila esta tendra la clase largo1
, y asi sucesivamente.
AGREGAR NUEVA FILA
var contador=0;
var fila=0;
$('.add-new').on('click', function () {
var row = '<tr>' +
'<td><input type="text" class="form-control lamina' + contador + '" name="lamina' + contador + '" id="lamina' + contador + '"></td>' +
'<td><input type="text" class="form-control largo' + contador + '" name="largo' + contador + '" id="largo' + contador + '"></td>' +
'<td><input type="text" class="form-control total' + contador + '" name="total' + contador + '" id="total' + contador + '"></td>' +
+
'</tr>';
$(".tablaRollo").append(row);
fila=contador;
contador++;
});
(contador
va estableciendo el numero de la fila (0,12,etc), fila
es igual a contador antes de aumentar esto con el fin de poder obtener el valor de input real)
Resulta que tengo un blur
que establece cuanto es la multiplicacion de lamina
y largo
, y el resultado me lo muestra en total
BLUR
//CUENTE TOTAL CORTADO Y DISMINUYE SALDO
$(document).on('blur', '.largo' + fila, function () {
var valor1 = parseInt($('.lamina' + fila).val());
var valor2 = parseInt($('.largo' + fila).val());
$('.total' + fila).val(valor1 * valor2);
});
Al generar una nueva fila contador
vale 1, mientras fila
vale 0 (como solo hay largo0
), hasta aqui todo bien. Resulta que al generar una nueva fila otra vez, contador
valdra 2, y fila
valdra 1, y va existir un input
con la clase "largo1
", a la hora de realizar el truco de blur
, este no funciona, viene mi pregunta, por que la segunda vez no pasa nada, puesto que todo esta correcto??
De antemano muchas gracias por la ayuda.
.add-new
fila
? Sino ahí tenés el problema. Como bien dice @JonathanOrta una opción es poner el código del blur dentro del$('.add-new')
. Pero lo ideal sería directamente armar el código del blur de otra forma.