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