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

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.

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/

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

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

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();
    });
});

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

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");

})

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;
    }
});

Essayez ceci qui fonctionne pour moi:

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

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.

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();
});

Utilisez simplement ceci:

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

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.