Cómo activar el evento de clic en el elemento href


80

Estoy tratando de activar el evento de clic en el hipervínculo con jQuery como se muestra a continuación. El hipervínculo no tiene ninguna identificación pero tiene cssclass

 $(document).ready(function () {  $('.cssbuttongo').trigger('click'); }); 

La función anterior no funciona. Este es el hipervínculo

<a href="hyperlinkurl" class="cssbuttongo">hyperlink anchor</a>

1
Como una clase se puede aplicar a varios elementos del DOM, no parece una buena idea activar un clic en ellos.
Igor Parra

1
NomikOS, tienes mucha razón en eso, pero verifiqué si algún otro elemento usa esta clase css :)
MonsterMMORPG

Respuestas:


78

No tengo pruebas fácticas para probar esto, pero ya me encontré con este problema. Parece que la activación de un evento click () en una <a>etiqueta no parece comportarse de la misma manera que esperaría con, digamos, un botón de entrada.

La solución alternativa que empleé fue establecer la propiedad location.href en la ventana que hace que el navegador cargue el recurso de solicitud así:

$(document).ready(function()
{
      var href = $('.cssbuttongo').attr('href');
      window.location.href = href; //causes the browser to refresh and load the requested url
   });
});

Editar:

Haría un violín js, pero la naturaleza de la pregunta entremezclada con cómo jsfiddle usa un iframe para representar el código hace que no sea posible.


Esta es la respuesta correcta. gracias :) También noté que hacer clic en href no funciona.
MonsterMMORPG

@MonsterMMorpg Tenga en cuenta que esto no hace que el navegador crea que es una acción directa del usuario. Así que use sabiamente = D
Matthew Cox

¿No debería ser var href = $ ('. Cssbuttongo'). Attr ('href');
Luci

7
Esto ignora la posibilidad de que el enlace también tenga un onclickevento. Solo hazlo $('.cssbuttongo')[0].click()para simular correctamente un clic en su totalidad.
Roman Starkov

En realidad, solo funciona en el archivo href completo. Como no pude poner el código aquí, lea mi respuesta a esta publicación.
Alan Dong

210

El método DOM nativo hace lo correcto:

$('.cssbuttongo')[0].click();
                  ^
              Important!

Esto funciona independientemente de si hrefes una URL, un fragmento (por ejemplo #blah) o incluso un javascript:.

Tenga en cuenta que esto llama al clickmétodo DOM en lugar del clickmétodo jQuery (que es muy incompleto y se ignora por completo href).


2
@Timwi, quise decir que el primero $('.cssbuttongo').click(); // ignores href!no garantiza que funcione. El último siempre funcionará, porque el uso de index [0] convertirá el objeto jQuery en un objeto JS normal, que es exactamente el mismo que usa un navegador. @Wei Liu
Alan Dong

1
¡Increíble! Respuesta muy directa e ilustrativa.
caiosm1005

11
Esta debería ser la respuesta seleccionada. ¡Funcionó perfectamente!
Amit G

3
@AdilMalik Funciona porque jquery no es lo único que tiene un método click (). Este código llama al método click () que no es de jquery, es un DOM nativo.
Roman Starkov

1
@Timwi Proporciono jsfiddle aquí: jsfiddle.net/NabiKAZ/3gv90od5
Nabi KAZ

31

Además de la gran respuesta de romkyns ... aquí hay documentación / ejemplos relevantes.


Los elementos DOM tienen un .click()método nativo .

El HTMLElement.click()método simula un clic del mouse en un elemento.

Cuando se usa el clic, también dispara el evento de clic del elemento que se propagará a los elementos más arriba en el árbol del documento (o cadena de eventos) y disparará sus eventos de clic también. Sin embargo, la propagación de un evento de clic no hará que un <a>elemento inicie la navegación como si se hubiera recibido un clic real del mouse. (referencia mdn)

Documentación relevante de W3 .


Algunos ejemplos..

  • Puede acceder a un elemento DOM específico desde un objeto jQuery: (ejemplo)

      $('a')[0].click();
    
  • Puede usar el .get()método para recuperar un elemento DOM de un objeto jQuery: (ejemplo)

      $('a').get(0).click();
    
  • Como era de esperar, puede seleccionar el elemento DOM y llamar al .click()método. (ejemplo)

      document.querySelector('a').click();
    

Vale la pena señalar que no se requiere jQuery para activar un .click()evento nativo .


4

Activar un clic a través de JavaScript no abrirá un hipervínculo. Ésta es una medida de seguridad integrada en el navegador.

Sin embargo, consulte esta pregunta para obtener algunas soluciones.


1
No lo creo .. PORQUE: ENCONTRÉ QUE FUNCIONA ASÍ ... Siga el jsfiddle aquí
Cody

3
@CodyDmd sigue siendo un evento de clic activado por el usuario. No es lo mismo que la pregunta original de OP.
Blazemonger

@CodyDmd Parece que [0]es importante en tu violín
Wei Liu

3
¿Contra qué vulnerabilidad protege eso, exactamente?
Roman Starkov

3
Bueno, no sé a qué te refieres, Blazemonger, porque no existe tal protección contra descargas o fraude de clics SEO en Firefox, Chrome o IE11. En otras palabras, tanto la primera como la segunda oración de su respuesta son falsas .
Roman Starkov

3

Solo quiero que sepan que la respuesta aceptada no siempre funciona.

Aquí hay un ejemplo de que fallará.

Si <href='/list'>

href = $('css_selector').attr('href')
"/list"
href = document.querySelector('css_selector').href
"http://localhost/list"

o puede agregar el href que obtuvo de jQuery a esto

href = document.URL +$('css_selector').attr('href');

o jQuery way

href = $('css_selector').prop('href')

Finalmente, invocalo para cambiar la URL de la página actual del navegador.

window.location.href = href

o sacarlo usando window.open(url)

Aquí hay un ejemplo en JSFiddle.


¿Entonces estás diciendo que esto no funciona si lo cambias a $('css_selector')[0].click()? Funciona en este JsFiddle ...
Roman Starkov

Para que conste, no fui yo quien votó en contra; Creo que puede haber algo aquí y aún no estoy seguro.
Roman Starkov

@romkyns, por supuesto, va a funcionar después de extraer elementos de jQuery usando [0] (se convierte en JS puro), quise decir $('.cssbuttongo').click();que no funcionará porque solo da el valor de href, en lugar de la URL de el navegador utiliza. Perdón por los comentarios engañosos.
Alan Dong

2
@LinDong: Si sabes que [0].click()funciona, ¿por qué tu respuesta no lo menciona?
Timwi

location.hrefacepta rutas relativas, por lo que el uso /listantepondrá automáticamente el dominio actual. Entonces funciona.
Tim

-1

Me enfrentaba a un problema similar al hacer clic en un botón, en lugar de en un enlace. No tuvo éxito en los métodos .trigger ('click') o [0] .click (), y no sabía por qué. Por fin, lo siguiente me funcionó:

$('#elementid').mousedown();
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.