Comment déclencher un clic sur un lien à l'aide de jQuery

239

J'ai un lien:

<ul id="titleee" class="gallery">
  <li>
    <a href="#inline" rel="prettyPhoto">Talent</a>
  </li>
</ul>

et j'essaye de le déclencher en utilisant:

$(document).ready(function() {
  $('#titleee').find('a').trigger('click');
});

Mais ça ne marche pas.

J'ai aussi essayé: $('#titleee a').trigger('click');

Modifier :

J'ai besoin de déclencher ce qu'on appelle ici <a href="#inline" rel="prettyPhoto">

jquery triggers click Vache patriotique
la source
7
location.href($('#titleee').find('a').attr("href"));?
Sylvain
3
ou même $ ('ul.gallery'). find ('li> a'). trigger ('click');
CarneyCode
114
Les mecs. La vraie réponse est si simple. $('#titleee a')[0].click();. En d'autres termes, utilisez la méthode de clic DOM, pas celle jQuery. Upvote Graham Hotchkiss !
Roman Starkov
5
@romkyns n'est pas correct car il ouvre une fenêtre contextuelle au lieu d'un nouvel onglet. mais en cliquant sur une durée fictive à l'intérieur de cette balise «a» sert le but
Shishir Arora
1
Si vous essayez de déclencher un événement sur l'ancre, le code dont vous disposez fonctionnera. $('ul#titleee li a[href="#inline"]').click();
Anand Pal

Réponses:

310

Si vous essayez de déclencher un événement sur l'ancre, le code dont vous disposez fonctionnera. J'ai recréé votre exemple dans jsfiddle avec un gestionnaire d'événements ajouté afin que vous puissiez voir que cela fonctionne:

$(document).on("click", "a", function(){
    $(this).text("It works!");
});

$(document).ready(function(){
    $("a").trigger("click");
});

Essayez-vous d'amener l'utilisateur à naviguer jusqu'à un certain point de la page Web en cliquant sur l'ancre, ou essayez-vous de déclencher des événements qui lui sont liés? Peut-être que vous n'avez pas réellement lié l'événement de clic à l'événement?

Aussi ceci:

$('#titleee').find('a').trigger('click');

est l'équivalent de ceci:

$('#titleee a').trigger('click');

Pas besoin d'appeler find. :)

Kit Sunde
la source
16
@Kit .find () est un sélecteur plus rapide que ce que vous proposez, faites un benchmark si vous n'êtes pas d'accord mais votre proposition le ralentit. positivement :-)
Ady Ngom
14
@mashappslabs - Ça va. Je suis heureux pour vous si vous ressentez le besoin de faire des optimisations prématurées et micro, peu importe à quel point c'est vrai. :)
Kit Sunde
5
@Kit ... donc quand vous faites une déclaration comme "pas besoin d'appeler find", cela ne tombe pas dans le domaine de l'optimisation prématurée ?? Je pense que oui, mais il se trouve que c'est plus lent que ce qui avait été proposé au départ. Je ne réponds pas par argument, mais pour un effort concerté pour améliorer ce que nous aimons tous faire. J'espère que cela se passe bien :-)
Ady Ngom
5
@mashappslabs - Ayant vu jsperf.com pour la première fois, j'ai pensé revenir et dire que vous aviez raison, votre méthode est plus rapide dans le cas général. Seul Opera est plus lent. jsperf.com/jquery-selector-perf-right-to-left/32
Kit Sunde
9
Curieusement, ce qui précède ne fonctionne pas pour moi, mais la réponse @GrahamHotchkiss le fait.
Oliver
210

Désolé, mais le gestionnaire d'événements n'est vraiment pas nécessaire. Ce dont vous avez besoin, c'est d'un autre élément de la balise sur lequel cliquer.

<a id="test1" href="javascript:alert('test1')">TEST1</a>
<a id="test2" href="javascript:alert('test2')"><span>TEST2</span></a>

Jquery:

$('#test1').trigger('click'); // Nothing
$('#test2').find('span').trigger('click'); // Works
$('#test2 span').trigger('click'); // Also Works

Tout dépend de ce que vous cliquez et ce n'est pas la balise mais la chose qu'elle contient. Malheureusement, le texte nu ne semble pas être reconnu par JQuery, mais il l'est par vanilla javascript:

document.getElementById('test1').click(); // Works!

Ou en accédant à l'objet jQuery en tant que tableau

$('#test1')[0].click(); // Works too!!!
Graham Hotchkiss
la source
9
$ ('selector') [0] .click () gérera en fait au moins un cas qui ne déclenchera pas le gestionnaire d'événements: le navigateur le reconnaîtra comme un clic réel pour déclencher un lien de gestionnaire de protocole. L'appel du déclencheur sur l'événement de clic ne provoquera pas le lancement de l'application associée. Merci de l'inclure dans votre réponse!
Greg Pettit
3
Oui, .click()c'est précisément ce dont j'avais besoin!
notacouch
3
$ ('# test2 span'). trigger ('click'); aidé car il peut ouvrir une URL dans un nouvel onglet mais $ ('# test1') [0] .click (); ouvrait une pop up instea.
Shishir Arora
Lorsque j'essaie de gérer, cliquez sur l'élément d'arrière-plan: $ ('# titleee a'). Trigger ('click'); -> Ça ne marche pas! $ ('# titleee a') [0] .click (); -> Fonctionne!
18
1
$ ('# test1') [0] .click (); est un sauveur. Merci beaucoup
Amit Bisht
18

Étant donné que cette question est classée n ° 1 dans Google pour "déclencher un clic sur un <a>élément" et qu'aucune réponse ne mentionne réellement comment vous faites cela, voici comment vous le faites:

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

Explication: vous déclenchez un clicksur l'élément html sous-jacent, pas sur l'objet jQuery .

Vous êtes les googleurs bienvenus :)

Alex
la source
2
"vous déclenchez un clic sur l'élément html sous-jacent, pas sur l'objet jQuery." - cela a cliqué pour moi, merci!
Frish
5

Avec le code que vous avez fourni, vous ne pouvez vous attendre à rien. Je seconde @mashappslabs: ajoutez d'abord un gestionnaire d'événements:

$("selector").click(function() {
    console.log("element was clicked"); // or alert("click");
});

puis déclenchez votre événement:

$("selector").click(); //or
$("selector").trigger("click");

et vous devriez voir le message dans votre console.

Julz
la source
5
Cela ne fonctionne pas pour moi: si le sélecteur est "a" (balise HTML pour les liens, juste pour être clair), la fonction anonyme est appelée lorsque j'appelle trigger, mais l'action de la balise ne se produit pas. C'est comme si l'événement ne se propageait pas à l'élément DOM associé. La réponse de @GrahamHotchkiss est la seule qui fonctionne de manière fiable pour moi.
Oliver
5

Si vous essayez de déclencher un événement sur l'ancre, le code dont vous disposez fonctionnera.

$(document).ready(function() {
  $('a#titleee').trigger('click');
});

OU

$(document).ready(function() {
  $('#titleee li a[href="#inline"]').click();
});

OU

$(document).ready(function() {
  $('ul#titleee li a[href="#inline"]').click();
});
Anand Pal
la source
3

Eh bien, vous devez d'abord configurer l'événement de clic, puis vous pouvez le déclencher et voir ce qui se passe:

//good habits first let's cache our selector
var $myLink = $('#titleee').find('a');
$myLink.click(function (evt) {
  evt.preventDefault();
  alert($(this).attr('href'));
});

// now the manual trigger
$myLink.trigger('click');
Ady Ngom
la source
3

Voici la démo pour déclencher un événement

<!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("input").select(function(){
            $("input").after(" Text marked!");
        });
        $("button").click(function(){
            $("input").trigger("select");
        });
    });
    </script>
    </head>
    <body>

    <input type="text" value="Hello World"><br><br>

    <button>Trigger the select event for the input field</button>

    </body>
    </html>
Harshad Hirapara
la source
3

Pour les liens, cela devrait fonctionner:

eval($(selector).attr('href'));
Amin
la source
2

Cela ne répond pas exactement à votre question, mais vous obtiendrez le même résultat avec moins de maux de tête.

J'ai toujours mes méthodes d'appel d'événements de clic qui contiennent toute la logique que je voudrais exécuter. Afin que je puisse simplement appeler la méthode directement si je veux effectuer l'action sans un clic réel.

Matthew Vines
la source
2

Vous devez appeler la .click()méthode native de l'élément ou utiliser l' createEventAPI.

Pour plus d'informations, veuillez visiter: https://learn.jquery.com/events/triggering-event-handlers/

George Filippakis
la source
6
Bienvenue dans Stack Overflow! Bien que cela puisse être un indice précieux pour résoudre le problème, une bonne réponse démontre également la solution. Veuillez modifier pour fournir un exemple de code pour montrer ce que vous voulez dire. Vous pouvez également envisager d'écrire ceci en tant que commentaire.
Toby Speight