0

simplificando un poco el codigo por que es muy extenso tengo este html

<div class="quantity buttons_added">
 <input type="number" size="4" class="input-text qty text" title="Qty"
                value="1" min="0" step="1" name="cantidad_{{$contador}}">
   <a href="" class="btn btn-warning actualizaCantidad_{{$contador}}" 
                data-linkcarrito="{{url('/carrito/'.$elementocarrito->slug)}}"
                data-cantidadidentificador="{{$contador+1}}"><i class="fa
                fa-refresh"></i></a>
           </div>

Este codigo es dinamico, por lo que en Jquery quiero que seleccione todas las clases que empiecen con "actualizaCantidad" y una vez seleccionados al darle a cada link individual obtenga una cantidad y un link, y me redireccione a ese mismo link, el problema es que cuando le doy click, nunca hace el preventDefault(), siempre me acaba cargando la pagina. He probado poniendo # en los links, con javascript:void() y con esto consigo evitar la ejecucion de la pagina, pero no me redirecciona a ningun sitio. He probado con e.preventDefault(); con e.stopPropagation(); y con return false y mismo resultado. He probado alert('JQUERY FUNCIONA '); para ver si me lo carga al inicio de la pagina y lo carga perfectamente, por lo que algun error de no cargar bien jquery queda descartado.

¿Alguna idea?

$('document').ready(function(){

alert('JQUERY FUNCIONA ');

$('a[class^="actualizaCantidad"]').click(function(e)

    {
         e.preventDefault();
        e.stopPropagation()

        var cantidad = $(this).data("cantidadidentificador");
        var href = $(this).data("linkcarrito");
            //$(location).attr("href", href);
            window.location.href = href;
            //alert(cantidad+' '+ href);

    }); });

2 respuestas 2

1

Ten en cuenta que cuando enlazas el controlador al evento click los links deben de estar ya creados.

Por lo que cuentas tiene pinta de que los links se generan después de haber ejecutado las instrucción:

$('a[class^="actualizaCantidad"]').click(function(e) { .... });

Esta instrucción va a añadir la función como controlador del evento click de todos los elementos que encuentre en el momento en el que se ejecuta. Si los links se generan más tarde tendrán el comportamiento por defecto.

Prueba cambiando tu alert "JQUERY FUNCIONA" por:

alert($('a[class^="actualizaCantidad"]').length);

De esta forma podrás comprobar si los links están ya creados cuando ejecutas la instrucción.

4
  • Evidentemente tiene que ser algo como lo que comentas, ya que de forma dinamica, es decir en este caso, el resultado del lenght es 0 , sin embargo haciendo una prueba con links fijos, el resultado es el numero de elementos. En este caso y al ser dinamicos ¿Como puedo conseguir obtener el link dinamico de cada enlace y que al pulsar se redireccione a ese mismo link? Commented el 9 ago. 2016 a las 11:36
  • Deberías ejecutar la instrucción que crea los controladores de eventos ($('a[class^="actualizaCantidad"]').click(....) después de que se generen los links. Commented el 9 ago. 2016 a las 11:43
  • Otra opción sería hacer el bind de los enlaces a clases que ya estén presentes en el html, para que se apliquen de manera dinámica: $('.buttons_added').on('click', 'a[class^="actualizaCantidad"]', function(e){ ... }); Commented el 9 ago. 2016 a las 11:52
  • Al final lo solucione simplemente cambiando a[class^="actualizaCantidad"] por .actualizaCantidad, tu respuesta me ayudo a conseguir eso. Muchas Gracias Commented el 11 ago. 2016 a las 17:29
1

La respuesta, va acorde a lo de Asies y al comentario de César González.

La manera correcta de Jquery ES agregar, un Evento Delegado.

más información en: http://api.jquery.com/on/

En resumen, dado un elemento padre, va a estar atento a todos los eventos que ocurran a sus hijos, ya sea que esten creados al inicio, o se vayan creando dinamicamente.

    $('div.buttons_added').on('click', 'a[class^="actualizaCantidad"]', function(){

    console.log("Actualizando a:", $(this).data('linkcarrito');
    // y aqui le mueves a lo que quieras

});

Suerte y saludos.

1
  • Me ayudo tambien tu respuesta. Muchas gracias. Commented el 11 ago. 2016 a las 17: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.