1

Hola tengo el siguiente problema tengo dos contadores: uno de recetas agregadas (que se inicializa en 0) y otro de recetas totales (que se inicializa en 24) la idea es que al tocar click en un boton se agrege una receta al carrito y el contador de recetas se aumente en uno y el de totales se decremente en uno y luego al eliminar la receta se incremente el totales y se decremente el de recetas. El problema surge al eliminar una receta la funcion se esta ejecutando la cantidad de veces de items que se añadieron ejemplo: Si se añadieron 3 recetas el primer click de eliminar se ejecutara una vez, el segundo click se ejecutara dos veces y el tercer click se ejecutara tres veces

dejo mi codigo:

let contador = 0;
                let totales = 24;
                $('#bookcount').append(contador);
                $('#bookleft').append(totales);

                 mybooks = new Array



                $('.addtocart').click(function(){
                    event.preventDefault();
                    // obtener el padre del link
                    var padre = $(this).parent().parent();
                    // obtener su id
                    var id = padre.attr('id');
                    var title = padre.data('title');
                    var idcart = $('#shoppingcart').find($(this).data("plato"))
                    /* console.log(title) */
                    if (contador == 24){
                        $('#shoppingcart').append("Ya alcanzaste el maximo de recetas")
                    } else{
                        $('#shoppingcart').append("<div class='row my-3' id='"+ id +"' data-id='"+id+"'><div class='col-6 my-auto p-0'><p>Receta</p><p>"+title+"</p></div><div class='col-1 p-0'><a class='removecart' class=' "+id+" '  href=''><img src='img/crops/trash.png' alt=''></a></div><div class='col-5 p-0'><img src='img/receta.jpg' alt='test' class='img-fluid'></div></div>");
                        $('#bookcount').empty();
                        $('#bookcount').append(contador = contador + 1);
                        $('#bookleft').empty();
                        $('#bookleft').append(totales = totales - 1);
                        mybooks.push(id);
                        console.log(mybooks)
                        console.log(contador);
                    }


                    $('.removecart').click(function(){
                        event.preventDefault();

                        contador = contador - 1;
                        totales = totales + 1;

                        $('#bookcount').empty();
                        $('#bookcount').append(contador);
                        $('#bookleft').empty();
                        $('#bookleft').append(totales);
                        console.log("contador despues",contador);
                        console.log("totales despues", totales);

                        idthis = $(this).parent().parent().attr("data-id")
                        // console.log(idthis)
                        var pos = mybooks.indexOf(idthis);
                        // console.log(pos)
                        if ( pos !== -1 ) {
                            var remove = mybooks.splice(pos,1);
                        }
                        console.log(mybooks);
                        $(this).parent().parent().remove();

                    })

                });
2
  • No es muy clara tu pregunta. ¿Te refieres a esta función $('.removecart').click(function(){? Ahí estás escuchando los cliks que ocurran en cualquiera de los elementos que tengan la clase removecart. ¿Podrías explicar con más claridad la lógica y también el problema?
    – A. Cedano
    el 6 nov. 2019 a las 21:04
  • mi idea es que al hacer click en removecart eliminé un div que se añade en el carrito y modifique los contadores. El problema es que la función se está ejecutando más de una vez
    – shape
    el 6 nov. 2019 a las 21:32

1 respuesta 1

1

El problema es que estas poniendo un evento dentro del otro.

Para que se vea mas claro voy a vaciar los eventos:

$('.addtocart').click(function(){
   //Code
   $('.removecart').click(function(){
       //Code
   });
});

Por lo que cada vez que haces click en el boton de "añadir" lo que realmente esta ocurriendo es que le estas añadiendo un evento nuevo a los elementos .removecart y luego al hacer click en ese botón se ejecutan todos los eventos.

Para arreglarlo separa los eventos:

$('.addtocart').click(function(){
    //Code    
});

$('.removecart').click(function(){
    //Code
});

Delegando eventos:

//Si ".addtocart" aun no existe
$(document).on("click", ".addtocart", function(e){
    //Code    
});

//Si ".removecart" aun no existe
$(document).on("click", ".removecart", function(e){
    //Code
});

En esta otra pregunta se explica el uso de delegar eventos con .on():

No se ejecuta el evento al ser elementos dinámicos, ¿Como delegar eventos?

2
  • mi problema es que el boton que tiene la clase .remocart se esta creando al hacer el llamado de .addtocart, al ponerlo como lo propones no se ejecuta nada
    – shape
    el 7 nov. 2019 a las 11:57
  • 1
    @Ramiro En ese caso tendrás que delegar el evento, pero no crearlo dentro del otro. Modifico la respuesta para que veas un ejemplo. Te recomiendo verte tambien la siguiente respuesta: No me calcula la hora al ser elementos dinámicos
    – x3k
    el 7 nov. 2019 a las 12:12

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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