martes, 24 de junio de 2014

JavaScript: Simular 'click' en un enlace <a>

Podemos utilizar la función trigger() de jQuery para lanzar un evento desde javascript:


$("#myButton").trigger("click");

Sin embargo no funcionará como esperamos si lo lanzamos sobre un link (elemento <a>). No nos llevará a la dirección del enlace.

Supongamos que tenemos el siguiente link para llevarnos a nuestra página de inicio:


Inicio

Despues nos piden que otro elemento de la página nos lleve al mismo sitio. Se nos ocurre la solución rápida de capturar el click en el nuevo elemento y lanzar un click al <a> con jQuery trigger().


//disparamos un click en el enlace para navegar a 'home.html'
//(NO FUNCIONARÁ)

$("#home-link").trigger("click");

No funciona porque lo que trigger() hace es disparar los event handlers asociados al evento, pero no seguirá el link, no navegará a la url.

En realidad trigger() dispara también el evento nativo, pero este es uno de los casos en los que tenemos que tener en cuenta que, como se explica en la documentación, no replica exactamente el evento real que originaría el usuario:

Although .trigger() simulates an event activation, complete with a synthesized event object, it does not perfectly replicate a naturally-occurring event.

La solución es disparar el evento con javascript puro (no jQuery). Primero obtenemos el elemento DOM (no jQuery) y luego utilizamos el método .click() nativo de los nodos del DOM:


document.getElementById("home-link").click();

También podemos utilizar el método .get() para obtener un elemento DOM a partir de un objeto jQuery:


$("#home-link").get(0).click();

Fuentes:

Learn jQuery: Triggering Event Handlers
StackOverflow: Why jquery cannot trigger native click on an anchor tag

20 comentarios:

  1. Hola, puedes ayudarme con una cosa parecida a esto?

    ResponderEliminar
  2. yo tengo una duda, tengo un formulario (algo similar a una encuesta) el formulario tiene un tiempo de 2 minutos para ser contestado, si los dos minutos pasan, me tiene que redireccionar a los resultados (osea otra pagina)..

    < script language="JavaScript">
    function redireccionar() {
    setTimeout("location.href='ejSerie1.php'", 9000); //solo puse esto para probar
    document.getElementById("comenzar").click();

    }


    pongo con body esto < body onLoad=redireccionar()>

    y este es mi boton (la que si arroja resultados al presionar obviam)

    < div class="btnDiv"> < input class="button" type="submit" name="comenzar" value="Siguiente">

    No se si puedas ayudarme con este problema que tengo

    ResponderEliminar
  3. Muy buen aporte necesitaba estos conocimientos!! Gracias!!

    ResponderEliminar
  4. Excelente aporte, me brinda la oportunidad de automatizar un alto porcentaje de los procesos de mis aplicaciones y así evitar conflictos por errores humanos.

    ResponderEliminar
  5. Excelente aporte, me brinda la oportunidad de automatizar un alto porcentaje de los procesos de mis aplicaciones y así evitar conflictos por errores humanos.

    ResponderEliminar
  6. Muchas gracias!!! Me ayudo muchísimo :)

    ResponderEliminar
  7. Hola, excelente aporte, tengo un caso similar y ya me canse de darle muchas vueltas con Jquery y no me funciona, tengo una pagina de fotos donde hice unos links con etiquetas data-tag para que se filtren las fotos y se muestran por temas. Necesito crear un link en otra página, a la pagina de fotos pero que ademas de redirigir a la pagina tambien active un boton de filtrar.

    he intentado hacer un < a > con .triger y con .click de jquery pero no logro que funcione.

    Me podrias ayudar , por favor ?

    ResponderEliminar
  8. wow !!! en verdad me acabas de salvar la vida !!! te lo agradezco y si puedo hacer algo por ti con gusto lo hare, ya pude resolverlo, con tu post, por si alguien se interesa lo resolvi asi:

    $ ( function ( ) {
    $ ( '.llamada' ).click(function() {
    document.getElementById( "bx" ).click();
    } ) ;
    } ) ;

    Tenias razón , muchas gracias !!!

    ResponderEliminar
    Respuestas
    1. Maestro, me quito el sombrero, pero este código me salvo la vida, agradecido...

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
    3. Hola OriamX, de la solución que te resultó me interesa saber como lo aplicas en el html ? así no me funcina ....

      Eliminar
  9. ya logre hacer el link que activa otro boton-link, pero solo me funciona dentro de la misma página, como puedo hacer para que el link funcione de manera externa ?

    ResponderEliminar
  10. Casi me vuelvo loco, buscando el por que de eso jajajajja

    ResponderEliminar
  11. Excelente Muchas gracias!, me sirvio para simular un click en una galeria con data-filter, tal vez podria haber otra solucion, pero esta me parecio la mas practica

    ResponderEliminar
  12. Me sirvio esto, perfecto, era lo q buscaba hace horas, gracias por tu aporte!!!

    ResponderEliminar