web-dev-qa-db-fra.com

Comment déclencher un événement click sur un élément href

J'essaie de déclencher un événement de clic sur un lien hypertexte avec jQuery comme ci-dessous. Un lien hypertexte n'a pas d'identifiant mais il a un cssclass

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

La fonction ci-dessus ne fonctionne pas. C'est le lien hypertexte

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

Je n'ai aucune preuve factuelle pour le prouver, mais j'ai déjà rencontré ce problème. Il semble que le déclenchement d'un événement click () sur une balise <a> ne semble pas se comporter de la même façon que vous le souhaiteriez avec un bouton d'entrée.

La solution que j'ai employée consistait à définir la propriété location.href sur la fenêtre, ce qui oblige le navigateur à charger la ressource de la requête de la manière suivante:

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

Modifier:

Je ferais un violon en js, mais la nature de la question, mêlée à la manière dont jsfiddle utilise un iframe pour restituer le code, rend cela impossible.

65
Feisty Mango

La méthode DOM native fait le bon choix:

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

Cela fonctionne indépendamment du fait que href soit une URL, un fragment (par exemple #blah) ou même un javascript:.

Notez que cela appelle la méthode DOM click à la place de la méthode jQuery click (très incomplète et ignore complètement href).

186
Roman Starkov

Outre Romkyns excellente réponse .., voici quelques exemples de documentation /.

Éléments DOM avec une méthode native .click() .

La méthode HTMLElement.click() simule un clic de souris sur un élément.

Lorsque click est utilisé, il déclenche également l'événement click de l'élément, ce qui bouillonne les éléments situés plus haut dans l'arborescence du document (ou la chaîne d'événements) et déclenche également leurs événements click. Cependant, le déclenchement d'un événement click ne fera pas en sorte qu'un élément <a> lance la navigation comme si un clic de souris avait été reçu. - (référence mdn)

Pertinent documentation W .

Quelques exemples ..

  • Vous pouvez accéder à un élément DOM spécifique à partir d'un objet jQuery: (exemple)

    $('a')[0].click();

  • Vous pouvez utiliser la méthode .get() pour extraire un élément DOM d'un objet jQuery: (exemple)

    $('a').get(0).click();

  • Comme prévu, vous pouvez sélectionner l'élément DOM et appeler la méthode .click() . (exemple)

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

Il convient de souligner que jQuery est et non requis pour déclencher un événement natif .click() .

28
Josh Crozier

Déclencher un clic via JavaScript n'ouvrira pas un lien hypertexte. Ceci est une mesure de sécurité intégrée au navigateur.

Voir cette question pour quelques solutions de contournement, cependant.

4
Blazemonger

Je veux juste que vous sachiez que la réponse acceptée ne fonctionne pas toujours.

Voici un exemple, il va échouer.

si <href='/list'>

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

ou vous pouvez ajouter le href que vous avez obtenu de jQuery à cette

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

ou de manière jQuery

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

Enfin, appelez-le pour changer l'URL de la page actuelle du navigateur.

window.location.href = href

ou le sortir en utilisant window.open(url)

Ici est un exemple dans JSFiddle.

3
Alan Dong