1

Estoy trabajando con laravel 5.4, tengo una pantalla para mostrar productos en la cual tengo codigo js para hacer filtros: Codigo ->

$("#select-categoria").change(event => {
    $.get(`catproductos/${event.target.value}`, function(res,sta){
        $("#productos").empty();
        res.forEach(element => {
            $("#productos").append(`
            <div class="col-sm-12 col-md-6 col-lg-4 p-b-50">
            <div class="block2">

                <div class="block2-img wrap-pic-w of-hidden pos-relative block2-labelnew">
                    <img src=${element.portada} alt="IMG-PRODUCT">

                    <div class="block2-overlay trans-0-4">
                            <a href="#" class="block2-btn-addwishlist hov-pointer trans-0-4">
                                <i class="icon-wishlist icon_heart_alt" aria-hidden="true"></i>
                                <i class="icon-wishlist icon_heart dis-none" aria-hidden="true"></i>
                            </a>

                                <div class="block2-btn-addcart w-size1 trans-0-4">
                                    <!-- Button -->
                                    <button class="agregarCarrito flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4"
                                        idProducto= "${element.id}"
                                        imagen=     "${element.imagen}"
                                        tituloPro=  "${element.titulo}"
                                        precioPro=  "${element.precio}">

                                        Añadir al carrito

                                    </button>
                                </div>
                            </div>
                        </div>

                            <div class="block2-txt p-t-20">
                                <a href="productos/${element.url}" class="block2-name dis-block s-text3 p-b-5">
                                    ${element.titulo}
                                </a>

                                <span class="block2-price m-text6 p-r-5">
                                    ${element.precio}
                            </span>
                    </div>
                </div>
            </div>`)
        });
    });
});

El codigo para filtrar funciona correctamente, pero ahora quiero llamar "agregarCarrito" que esta dentro del boton, pero cuando le doy click no me reconoce (es como si no hiciera click) El codigo para para percibir el click es:

$(".agregarCarrito").click(function(){

var idProducto=$(this).attr("idProducto");
var imagen=$(this).attr("imagen");
var titulo=$(this).attr("tituloPro");
var precio=$(this).attr("precioPro");
});

Alguna solucion o talves alguna pista del porque no me reconoce la clase??

1
  • No puedes setear atributos que no son propios del elemento, me refiero a que <button> no tiene ningún atributo llamado "idProducto" y los demás. el 25 jul. 2019 a las 4:04

1 respuesta 1

4

El problema es que estas agregando elementos dinámicamente, el evento .on('click', selector, function(){}) permite trabajar con elementos agregados después de haber cargado el DOM, mientras que con .click(function(){}) esto no es posible.

Prueba con esto:

$(document).on("click", ".agregarCarrito", function(){

var idProducto=$(this).attr("idProducto");
var imagen=$(this).attr("imagen");
var titulo=$(this).attr("tituloPro");
var precio=$(this).attr("precioPro");

});
1
  • Vaya pase con este problema creo como 5 dias haha gracias amigo... funciono a la perfeccion el 25 jul. 2019 a las 4:23

Tu Respuesta

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

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