La solución podría ser la siguiente, a los input carritoProducto (que segun entiendo es el dato cantidad de productos) agrégales una clase al momento de añadirlos a la tabla. Por el ejemplo el nombre de la clase seria cantidad_productos
.
<input type="number" name="carritoProducto" id="carritoProducto" class="cantidad_productos text-center" value="" style="width: 50%;" required="true" data-precio-producto="'+precioProducto+'">
Como aspecto adicional incorpora el precio del producto ya que es un dato que vamos a utilizar mas adelante (para esto debes agregar el atributo data-"nombre de la variable"
, en este caso seria data-precio-producto
, mayor información sobre los atributos de datos (dataset) y manipulación de dataset con jquery).
Tambien incluye ununa clase al input precioTotal (en este caso el nombre seria total_productos
)
<input type="number" name="precioTotal" id="precioTotal" class="text-center total_productos" style="width: 70%;" readonly="true">
Dentro del $(document).ready(function(){ ... })
agrega lo siguiente:
$('#tablaProductoCarritoMujer').on('keyup','.cantidad_productos', function(){
var precio_p = $(this).data('precio-producto') // obtenemos el valor asignado en el atributo data-precio-producto
var cantidad = $(this).val() //obtenemos el valor propio del input
var input_total = $(this).closest('tr').find('.total_productos'); //con closest obtenemos el padre mas cercano tipo 'tr' y buscamos dentro de el input con la clase .total_productos
var total = precio_p * cantidad; //calculamos
input_total.val(total); //asignamos el valor
});
Con esto configuramos el evento keyup de los input independientes si son o no preexistentes en el DOM.