0

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.

2 respuestas 2

0

La razón es que JQuery asigna los listeners una vez que se haya leído el js, es decir si tu tienes esto

<html>
<head>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script type="text/javascript">
		$('.do').on('click', function(){
			alert('algo')
		})
	</script>
</head>
<body>
  <div class="do"> Este es el div</div>
</body>
</html>

No funcionará, debido a que ley el script en el head, pero aun no había ningún elemento con clase do en el DOM al momento de leer el js.

Pero si lo pones después del div

<!DOCTYPE html>
<html>
<head>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">			</script>
	
</head>
<body>
  <div class="do"> Este es el div</div>
  <script type="text/javascript">
		$('.do').on('click', function(){
			alert('algo')
		})
	</script>
</body>
</html>

Funcionará, dado que una vez leído el js, ya existía el div con clase do en el div

Dado que agregas dinámicamente tu componente con clase borrar_fila, al momento de leer tu js no se encuentra ningún elemento con clase borrar_fila, por lo que el listener no se lo asigna a ningún elemento.

entonces, ¿Por qué funciona si lo insertas dentro de otro onclick?

La razón es porque dentro del onclick, el elemento con clase .cantidad_botella existe, por lo que realiza el listener que se le fue asignado, ejecuta dentro todo el código que tiene que también es

$(".borrar_fila").click(function(){
    var precio_borrar = parseFloat($(this).prev().html());
    borrarFila(precio_borrar);
});

por lo que vuelve a realizar la búsqueda en el DOM y como ya existen elementos con clase borrar_fila les asigna nuevamente el listener, por eso solo funciona dentro de un onclick en tu caso

La solución a tu problema podría ser el método one de JQuery, con el que solo realiza la acción una sola vez

1
  • wow, ¡muchísimas gracias por esa explicación tan detallada! He probado a hacer esto: $(".borrar_fila").one("click", function(){ precio_borrar = parseFloat($(this).prev().html()); borrarFila(precio_borrar); }); y sigue haciendo llamando a la función borrarFila() más de una vez :/ aún así le seguiré dando vueltas a ese método, no lo conocía
    – jsNoob
    Commented el 25 jul. 2019 a las 20:40
0

Actualizado: He refactorizado tu códido a algo más legible y funcional, hace tiempo que no agarraba JQuery y me entretuve haciéndolo, no guarda la estructura que me gustaría porque he intentado preservar la tuya lo más posible y funciona para lo que buscas:

// contexto de datos
const productos = [
  { id_producto: 1, nombre_producto: "foo", precio_producto: "1000.90" },
  { id_producto: 2, nombre_producto: "bar", precio_producto: "2000.50" }
];

// target a los elementos que se usarán
const $tabla = $("#tabla");
const $contenedorSeccion2 = $("#contenedorSeccion2");
const $recuentoPedido = $("#recuentoPedido span");

// inicialización
$(document).ready(function () {
  cargarProductos()
});

/**
 * Crea Los productos y parametriza sus atributos de acuerdo al array productos, en 
 * el (<button>Añadir al carrito</button>) indica que llamará a la función: agregarAlCarrito()
 * donde le enviará dos parámetros, el primero es el elemento donde se dió click osea el 
 * button y el segundo el indice del producto que se está iterando.
 * 
 */
function cargarProductos() {
  $.each(productos, function(index, 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}"
              value="1" min="1" placeholder='1' 
              class='campo3'
            >
            <i class='fas fa-minus iconoPedido resta'></i>
          </div>
          <br>
          <button class='cantidad_botella' onclick='agregarAlCarrito(this, ${index})'>
            Añadir al carrito
          </button>
        </div>
      `
    );
  });
}

/**
 * Agrega una nueva fila en (<div id="tabla"></div>) con el valor del input
 * al momento de dar al (<button>Añadir Al Carrito</button>), recibe el index
 * del objeto que le corresponde en el array productos y lo usa para parametrizar
 * la nueva fila y calcula el subTotal finalmente llama a actualizarTotal().
 * 
 * @param {node} element 
 * @param {number} index 
 */
function agregarAlCarrito(element, index) {
  let cantidadInputProducto = $(element).siblings("div").find("input").val();

  let producto = productos[index];

  let subTotal = cantidadInputProducto * producto.precio_producto

  $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}" 
            onchange="onChangeCantidad(this, ${producto.precio_producto})"
            value="${cantidadInputProducto}" 
            min="0"
          >
        </td>
        <td class="sub-total">subTotal: <span>${cantidadEnFloat(subTotal)}</span></td>
        <td class="borrar_fila" onclick="onClickFila(this)">
          <i style="font-size:17px; background-color: yellow; cursor: pointer; margin: 0 1rem" class="fa">X</i>
        </td>
      </tr>
    `
  );

  actualizarTotal()
}

/**
 * Recibe el elemento <td> que tiene el icono eliminar, selecciona a su padre (<tr>)
 * y lo elimina, luego llama a actualizarTotal().
 * 
 * @param {node} element 
 */
function onClickFila(element) {
  $(element).parent().remove()

  actualizarTotal()
}

/**
 * Actualiza el subTotal del producto cada vez que el [input=number] cambia
 * en su respectiva fila y llama a actualizarTotal().
 * 
 * @param {node} element 
 * @param {number} productoPrecio 
 */
function onChangeCantidad(element, productoPrecio) {
  // cantidad en el input
  let cantidadInputActual = $(element).val()
  let nuevoSubTotal = productoPrecio * cantidadInputActual
  // elemento donde se indica el subtotal
  let subTotalElement = $(element).parent().siblings('td.sub-total').find('span')
  // actualiza el nuevo subTotal
  subTotalElement.html(cantidadEnFloat(nuevoSubTotal))  

  actualizarTotal()
}

/**
 * Dentro de (<div id="tabla"></div>) Selecciona todos los elementos 
 * donde se indica el subtotal de los productos, obtiene su valor (HTML)
 * y los suma para indicarlo en (<div id="recuentoPedido"></div>) como total.
 * 
 */
function actualizarTotal() {
  let subTotalElements = $tabla.find('tr td.sub-total span')
  let total = 0
  subTotalElements.each((index, cantidad) => {
    total += parseFloat(cantidad.innerHTML)
  })
  
  $recuentoPedido.html(cantidadEnFloat(total))
}

/**
 * Retorna la cantidad con 2 cifras decimales.
 * 
 * @param {number} cantidad 
 */
function cantidadEnFloat(cantidad) {
  return cantidad.toFixed(2)
}
#recuentoPedido, #tabla {
  margin-top: 2rem;
}

#recuentoPedido {
  font-size: 2rem;
  color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
  <div id="contenedorSeccion2"></div>
  <div id="tabla"></div>
  <div id="recuentoPedido">total: <span>0.00</span></div>
</center>

2
  • Lo que quiero hacer es que al hacer click sobre un td que tenga la clase borrar_fila la función borrarFila() sea llamada una sola vez. Ahora mismo tal como tengo el código dicha función se ejecuta tantas veces como se haya clicado el botón que tiene la clase cantidad_botella . P.D. tremendo trabajito te habrás pegado para reescribir eso >.< tenía que haber escrito mi código mejor
    – jsNoob
    Commented el 25 jul. 2019 a las 20:46
  • Actualicé mi respuesta. Commented el 26 jul. 2019 a las 15:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.