Muy buenas a todos, llevo poco tiempo en la programación y ésta es la primera vez que publico una pregunta, espero explicarme bien. Pido disculpas de antemano por la extensión, no sé cómo resumirlo más sin que deje de entenderse.
Estoy intentando hacer un carrito de compra con JavaScript y jQuery. Me he quedado atascada con el botón de Borrar un artículo. Con una petición AJAX muestro los productos que hay en la base de datos, creo el botón de "Añadir al carrito", el cual tiene definida una función en onclick
que hace que se creen dinámicamente las filas y columnas de la tabla del carrito. Ésta es la función que recorre el json obtenido de la petición AJAX, se ejecuta dentro del parámetro success
de la petición y va creándolo todo (es un poco tocho):
$.each(productos, function(i, producto){
$("#contenedorSeccion2").append("<div class='contenedorBotella'><p class='descripcion'>"+producto.nombre_producto+"<br><span class='precio'>"+producto.precio_producto.replace(".", ",")+" €</span><span class='iva'> IVA incluido</span></p><div class='contenedorPedido'><i class='fas fa-plus iconoPedido suma'></i><input type='number' name='canti"+producto.id_producto+"' id='canti"+producto.id_producto+"' value='1' min='1' placeholder='1' class='campo3'><i class='fas fa-minus iconoPedido resta'></i></div><br><button class='cantidad_botella' onclick='$(\"#tabla\").append(\"<tr><td>"+producto.nombre_producto+"</td><td id=precio_canti"+producto.id_producto+">"+producto.precio_producto+"</td><td><input type=number class=campo4 name=canti"+producto.id_producto+" id=lacanti"+producto.id_producto+" value=1 min=0 placeholder=1></td><td></td><td class=borrar_fila><i style=font-size:17px; class=fa></i></td></tr>\")'>Añadir al carrito</button></div>");
});
En la columna (td
) con la clase borrar_fila
va un icono de papelera y mi idea es que al clicar ese td
, la fila (tr
) que lo contenga desaparezca y el importe del producto que esté en ese tr
se le reste al importe total. El botón de "Añadir al carrito" tiene la clase cantidad_botella
, cuando se clica hago una serie de cosas en las que no voy a entrar ahora porque de momento funcionan correctamente.
Al final del todo y dentro de la función que es llamada al hacer click en .cantidad_botella
, está la función que quiero que se ejecute al clicar cualquier td
con la clase borrar_fila
(que a su vez llama a la función borrarFila()
, declarada al principio). Mi problema es que la función sólo se ejecuta si coloco el bloque de $(".borrar_fila").click(function()
dentro del de $(".cantidad_botella").click(function()
. Esto ejecuta bien el cálculo, pero en el caso de que el botón de "Añadir al carrito" de un mismo producto haya sido pulsado más de una vez, la función borrarFila()
se ejecuta tantas veces como se haya pulsado ese botón (yo quiero que se ejecute una sola vez, sólo cuando se haga clic en un td
con la clase borrar_fila
):
//FUNCIÓN QUE BORRA LA FILA Y ACTUALIZA EL IMPORTE (TotalSuma)
function borrarFila(precio_borrar){
var precio_borrar = parseFloat($(this).prev().html());
$(this).parent().remove();
precio_borrar = parseFloat(precio_borrar);
TotalSuma = document.getElementById('recuentoPedido').innerHTML;
TotalSuma = (parseFloat(TotalSuma) - parseFloat(precio_borrar)).toFixed(2);
document.getElementById('recuentoPedido').innerHTML =TotalSuma;
}
//AÑADIR VALUE DE LA CANTIDAD Y EL PRECIO TOTAL
$(".cantidad_botella").click(function(){
/*código que no he añadido porque creo que no aporta nada a la pregunta,
que selecciona la información que se va a escribir en una nueva fila del carrito*/
if (existe_fila.length > 1) {
/*si el botón de "Añadir al carrito" de un mismo producto ha sido
pulsado más de una vez, pinta una fila con ese producto, añade una clase que
la oculta y actualiza la cantidad de ese producto en el carrito*/
}else{
/*si es la primera vez que se pulsa "Añadir al carrito", pinta una fila
con la información de ese producto (la que va a estar visible)*/
}
//Al pulsar en un td que tenga la clase borrar_fila, recoge el precio de ese producto, pársealo y llama a la función borrarFila():
$(".borrar_fila").click(function(){
var precio_borrar = parseFloat($(this).prev().html());
borrarFila(precio_borrar);
});
});
Si pongo este último bloque de código fuera, no funciona nada, ni siquiera si le pido que simplemente aparezca un alert
al hacer click en algún elemento que tenga la clase borrar_fila
, tampoco aparece ningún error en la consola, es como si no lo detectara. También he intentado que, al crear el td
con la clase borrar_fila
al principio, llamar a la función borrarFila
con el evento onclick
en el td
, pero en ese caso aparece un error en la consola diciendo que esa función no está definida. ¿Cuál puede ser el problema? Lo siento si ha quedado un poco confuso.