web-dev-qa-db-fra.com

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

J'ai de la difficulté à comprendre comment simuler un clic de souris avec JQuery. Quelqu'un peut-il s'il vous plaît informer moi 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: VIOLON

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

javascriptjqueryhtmltriggerseventtrigger
133
lickmycode

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 méthode .trigger() 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/

255
Alex W

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

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

C'est le comportement de JQuery. Je ne suis pas sûr de savoir pourquoi cela fonctionne de cette façon, cela ne fait que déclencher la fonction onClick sur le lien.

Essayer:

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

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!
        }
    });
}
19
Reza Mamun

Peut être utile:

Le code qui appelle le déclencheur devrait aller after l'événement est appelé.

Par exemple, je souhaite exécuter un code lorsque la valeur de #expense_tickets est modifiée et également 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");

})
14
Albert Català

la fonction .trigger('click'); de jQuery ne provoquera qu'un événement à déclencher sur cet événement, elle ne déclenchera pas l'action du navigateur par défaut également.

Vous pouvez simuler la même fonctionnalité avec le code 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;
    }
});
4
Alexander O'Mara

Essayez ceci qui fonctionne pour moi:

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

Techniquement, pas une réponse à cela, mais un bon usage de la réponse acceptée ( https://stackoverflow.com/a/20928975/82028 ) pour créer des boutons next et prev 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
Tisch

J'ai essayé les deux premières réponses, cela ne fonctionnait pas jusqu'à ce que je supprime "display: none" de mes éléments d'entrée de fichier. Ensuite, je suis revenu à .trigger () cela fonctionnait également au safari pour windows.

Donc conclusion, N'utilisez pas display: none; pour cacher votre entrée dans le fichier, vous pouvez utiliser l'opacité: 0 à la place.

0
Himanshu Saini