So erhalten Sie JQuery.trigger ('click'); um einen Mausklick zu starten


145

Es fällt mir schwer zu verstehen, wie man einen Mausklick mit JQuery simuliert. Kann mir bitte jemand mitteilen, was ich falsch mache?

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

Demo: FIDDLE

Wenn ich auf die Schaltfläche #foo klicke, möchte ich einen Klick auf #bar simulieren. Wenn ich dies jedoch versuche, passiert nichts. Ich habe es auch versucht, jQuery(document).ready(function(){...})aber ohne Erfolg.


2
jQuery triggerfunktioniert nur, wenn ein 'jQuery click'-Ereignis hinzugefügt wird. Andernfalls können Sie auf diese Weise nichts tun.
Reza Mamun

3
Dies ist eine im Browser integrierte Sicherheitsmaßnahme. Siehe @ Blazemonger Antwort: stackoverflow.com/questions/7999806/...
sanchez

1
@ san.chez Interessant, danke für die Info, wusste vorher nichts über diese Sicherheitsmaßnahme!
Lickmycode

Antworten:


277

Sie müssen jQuery('#bar')[0].click(); einen Mausklick auf das eigentliche DOM-Element (nicht auf das jQuery-Objekt) simulieren , anstatt die .trigger()jQuery-Methode zu verwenden.

Hinweis: DOM Level 2 .click()funktioniert bei einigen Elementen in Safari nicht . Sie müssen eine Problemumgehung verwenden.

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


18
du hast meinen Tag gerettet $ ('# asd') [0] .click ();
Waza123

Verwenden Sie diese Option, um auf die nächste Registerkarte in jQuery ACF-Feldern zu klicken: $ ('. Next'). Klicken Sie auf (function () {$ ('# primary li.active'). Next (). Find ('. Acf-tab-button ') [0] .click ();});
Tisch

1
Vielen Dank. Es funktioniert auf dem Desktop. Aber auf Mobilgeräten (Android Chrome) ist dies nicht der Fall. irgendwelche Vorschläge?
kk-dev11

Aus irgendeinem Grund wird dadurch der Hash in der aktuellen URL zerstört.
Luis

1
Wenn einer der hrefs auf dem <a-Tag '#' ist, würde dies der Fall sein. <a leitet normalerweise zu einer anderen URL weiter. Sie müssen es mit ev.preventDefault () und ev.stopPropagation () stoppen, bevor Ihr Click-Handler zurückkehrt. ODER verwenden Sie ein anderes Tag als <a; Sie können Klick-Handler an alles anhängen, was sichtbar ist.
OsamaBinLogin

43

Sie müssen nur ein kleines Timeout-Ereignis einfügen, bevor Sie dies tun .click() :

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

Funktioniert perfekt, wenn Sie versuchen, einen Klick beim Laden der Seite zu simulieren.
Gabriel Dzul

33

Dies ist das JQuery-Verhalten. Ich bin nicht sicher, warum es so funktioniert, es löst nur die onClick-Funktion auf dem Link aus.

Versuchen:

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

Danke für die Erklärung. Sehr irritierendes Verhalten von jQuery, aber Ihr Code funktioniert.
Lickmycode

Überhaupt nicht irritierend. trigger()soll den JavaScript- Teil des Klickereignisses ausführen . Es ist sehr ähnlich wie das Erstellen eines, das function var() {}mehrfach wiederverwendet wird.

21

Siehe meine Demo: 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!
        }
    });
}

Ich würde das this.click();in einelse if(this.click)
Alex W

15

Könnte nützlich sein:

Der Code, der den Trigger aufruft, sollte nach dem Aufruf des Ereignisses angezeigt werden.

Zum Beispiel habe ich Code, den ich ausführen möchte, wenn der Wert von #expense_tickets geändert wird und wenn die Seite neu geladen wird

$(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 das war auch mein Problem! War verblüfft, warum das trigger()nicht funktionierte. Es stellte sich heraus, dass ich den Triggercode über der aufgerufenen Funktion gesetzt hatte - der Hook war also nicht wirklich vorhanden. Doh!
Andrew Newby

5

jQuery's .trigger('click');löst nur ein Ereignis bei diesem Ereignis aus, nicht auch die Standardbrowseraktion.

Sie können dieselbe Funktionalität mit dem folgenden JavaScript simulieren:

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

Versuchen Sie dies, das für mich funktioniert:

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

0

Ich habe die beiden besten Antworten ausprobiert. Es hat bei mir nicht funktioniert, bis ich "display: none" aus meinen Dateieingabeelementen entfernt habe. Dann kehrte ich zu .trigger () zurück, es funktionierte auch bei Safari für Windows.

Fazit: Verwenden Sie keine Anzeige: keine; Um Ihre Dateieingabe auszublenden , können Sie stattdessen die Deckkraft 0 verwenden.


0

Technisch keine Antwort darauf, aber eine gute Verwendung der akzeptierten Antwort ( https://stackoverflow.com/a/20928975/82028 ), um die Schaltflächen next und prev für die Registerkarten in jQuery ACF-Feldern zu erstellen:

$('.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

Verwenden Sie einfach dies:

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

-3

Sie können ein Klickereignis nicht mit Javascript simulieren. Die jQuery- .trigger()Funktion löst nur ein Ereignis mit dem Namen "click" auf das Element aus, das Sie mit der .on()jQuery-Methode erfassen können .


9
"Sie können ein Klickereignis nicht mit Javascript simulieren" - Ja, das können Sie .
nnnnnn

Falsch ... Sie können ein Klickereignis mit Javascript / jquery simulieren und das Triggerklickereignis mit .click ohne ein erfassen.
Aerious
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.