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

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.