Comment obtenir JQuery.trigger ('clic'); pour lancer un clic de souris


145

J'ai du mal à comprendre comment simuler un clic de souris en utilisant JQuery. Quelqu'un peut-il s'il vous plaît m'informer de ce que je fais mal.

HTML:

<a id="bar" href="http://stackoverflow.com" target="_blank">Don't click me!</a>
<span id="foo">Click me!</span>

jQuery:

jQuery('#foo').on('click', function(){
    jQuery('#bar').trigger('click');
});

Démo: FIDDLE

quand je clique sur le bouton #foo je veux simuler un clic sur #bar mais quand j'essaye cela, rien ne se passe. J'ai aussi essayé jQuery(document).ready(function(){...})mais sans succès.


2
jQuery triggerne fonctionne que si un événement «jQuery click» est ajouté. Sinon, vous ne pourrez rien faire de cette manière;
Reza Mamun

3
Il s'agit d'une mesure de sécurité intégrée au navigateur. Voir la réponse de @ Blazemonger: stackoverflow.com/questions/7999806/…
sanchez le

1
@ san.chez Intéressant, merci pour l'info, je ne connaissais pas cette mesure de sécurité avant!
lickmycode

Réponses:


277

Vous devez utiliser jQuery('#bar')[0].click(); pour simuler un clic de souris sur l'élément DOM réel (pas l'objet jQuery), au lieu d'utiliser la .trigger()méthode jQuery.

Remarque: DOM niveau 2 .click()ne fonctionne pas sur certains éléments de Safari . Vous devrez utiliser une solution de contournement.

http://api.jquery.com/click/


18
vous avez sauvé ma journée $ ('# asd') [0] .click ();
waza123

Utilisé ceci pour cliquer sur l'onglet suivant sur les champs jQuery ACF: $ ('. Next'). Click (function () {$ ('# primary li.active'). Next (). Find ('. Acf-tab-button ') [0] .cliquez ();});
Tisch

1
Merci. Cela fonctionne sur le bureau. Mais sur mobile (Android Chrome), ce n'est pas le cas. Aucune suggestion?
kk-dev11 du

Pour une raison quelconque, cela détruit le hachage dans l'URL actuelle.
luis

1
si l'un des hrefs de la balise <a est '#', cela le ferait. <a redirige normalement vers une URL différente. Vous devez l'arrêter avec ev.preventDefault () et ev.stopPropagation () avant le retour de votre gestionnaire de clics. OU, utilisez une autre balise en plus de <a; vous pouvez attacher des gestionnaires de clics à tout ce qui est visible.
OsamaBinLogin

43

Vous avez juste besoin de mettre un petit événement de timeout avant de faire .click() comme ceci:

setTimeout(function(){ $('#btn').click()}, 100);

Fonctionne parfaitement si vous essayez de simuler un clic lors du chargement de la page.
Gabriel Dzul

33

C'est le comportement de JQuery. Je ne sais pas pourquoi cela fonctionne de cette façon, cela ne déclenche que la fonction onClick sur le lien.

Essayer:

jQuery(document).ready(function() {
    jQuery('#foo').on('click', function() {
        jQuery('#bar')[0].click();
    });
});

Merci pour l'explication. Comportement très irritant de jQuery, mais votre code fonctionne.
lickmycode

Pas du tout irritant. trigger()est destiné à exécuter la partie JavaScript de l' événement de clic . C'est très similaire à la création d'un qui est function var() {}réutilisé plusieurs fois.

21

Voir ma démo: http://jsfiddle.net/8AVau/1/

jQuery(document).ready(function(){
    jQuery('#foo').on('click', function(){
         jQuery('#bar').simulateClick('click');
    });
});

jQuery.fn.simulateClick = function() {
    return this.each(function() {
        if('createEvent' in document) {
            var doc = this.ownerDocument,
                evt = doc.createEvent('MouseEvents');
            evt.initMouseEvent('click', true, true, doc.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
            this.dispatchEvent(evt);
        } else {
            this.click(); // IE Boss!
        }
    });
}

Je terminerais le this.click();dans unelse if(this.click)
Alex W

15

Peut être utile:

Le code qui appelle le déclencheur doit aller après l'appel de l'événement.

Par exemple, j'ai du code que je souhaite exécuter lorsque la valeur de #expense_tickets est modifiée, et aussi, lorsque la page est rechargée

$(function() { 

  $("#expense_tickets").change(function() {
    // code that I want to be executed when #expense_tickets value is changed, and also, when page is reload
  });

  // now we trigger the change event
  $("#expense_tickets").trigger("change");

})

4
Ahhh c'était aussi mon problème! Était déconcerté de savoir pourquoi le trigger()ne fonctionnait pas. Il s'avère que j'avais le code de déclenchement placé AU-DESSUS de la fonction qu'il appelait - donc le crochet n'était pas réellement en place. Doh!
Andrew Newby

5

jQuery .trigger('click');ne provoquera le déclenchement d'un événement que sur cet événement, il ne déclenchera pas non plus l'action du navigateur par défaut.

Vous pouvez simuler la même fonctionnalité avec le JavaScript suivant:

jQuery('#foo').on('click', function(){
    var bar = jQuery('#bar');
    var href = bar.attr('href');
    if(bar.attr("target") === "_blank")
    {
        window.open(href);
    }else{
        window.location = href;
    }
});

2

Essayez ceci qui fonctionne pour moi:

$('#bar').mousedown();

0

J'ai essayé les deux premières réponses, cela n'a pas fonctionné pour moi tant que j'ai supprimé "display: none" de mes éléments d'entrée de fichier. Ensuite, je suis revenu à .trigger (), cela fonctionnait également à Safari pour Windows.

Donc conclusion, n'utilisez pas d'affichage: aucun; pour masquer votre entrée de fichier , vous pouvez utiliser opacity: 0 à la place.


0

Techniquement pas une réponse à cela, mais une bonne utilisation de la réponse acceptée ( https://stackoverflow.com/a/20928975/82028 ) pour créer les boutons suivant et précédent pour les onglets des champs jQuery ACF:

$('.next').click(function () {
    $('#primary li.active').next().find('.acf-tab-button')[0].click();
});

$('.prev').click(function () {
    $('#primary li.active').prev().find('.acf-tab-button')[0].click();
});

0

Utilisez simplement ceci:

$(function() {
 $('#watchButton').click();
});

-3

Vous ne pouvez pas simuler un événement de clic avec javascript. La .trigger()fonction jQuery ne déclenche qu'un événement nommé "clic" sur l'élément, que vous pouvez capturer avec la .on()méthode jQuery.


9
"Vous ne pouvez pas simuler un événement de clic avec javascript" - Oui, vous pouvez .
nnnnnn

Mauvais ... vous pouvez simuler un événement de clic avec javascript / jquery et vous pouvez capturer un événement de clic déclencheur avec .click sans on.
Aerious
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.