web-dev-qa-db-fra.com

Comment déclencher un clic sur un lien en utilisant jQuery

J'ai un lien:

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

et j'essaie 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');

Edit:

J'ai en fait besoin de déclencher tout ce qui est appelé ici <a href="#inline" rel="prettyPhoto">

jquerytriggersclick
208
Patrioticcow

Si vous essayez de déclencher un événement sur l'ancre, alors le code que vous avez fonctionnera. J'ai recréé votre exemple dans jsfiddle avec un gestionnaire d'événements supplémentaire 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 de faire en sorte que l'utilisateur accède à 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 n’avez-vous pas réellement lié l’événement click à cet événement?

Aussi ceci:

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

est l'équivalent de ceci:

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

Pas besoin d'appeler trouver. :)

263
Kit Sunde

Désolé, le gestionnaire d'événements n'est vraiment pas nécessaire. Ce dont vous avez besoin est 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

Il s’agit de ce sur quoi 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 par Vanilla javascript:

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

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

$('#test1')[0].click(); // Works too!!!
187
Graham Hotchkiss

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.

5
Julz

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

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

OR

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

OR

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

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

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

Explication: vous déclenchez une click sur l'élément HTML sous-jacent, pas sur l'objet jQuery.

Vous êtes les bienvenus googlers :)

5
Alex

Pour les liens, cela devrait fonctionner:

eval($(selector).attr('href'));
3
Amin

Vous devez d'abord configurer l'événement click pour pouvoir 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');
3
Ady Ngom

Ceci est la démo comment 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>
3
Harshad Hirapara

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

Pour plus d'informations, s'il vous plaît visitez: https://learn.jquery.com/events/triggering-event-handlers/

2
George Filippakis

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'appels d'événements de clic qui contiennent toute la logique que j'aimerais exécuter. Pour que je puisse simplement appeler la méthode directement si je veux effectuer l'action sans un clic réel.

2
Matthew Vines