Jak zdobyć JQuery.trigger („kliknij”); aby zainicjować kliknięcie myszą

145

Trudno mi zrozumieć, jak symulować kliknięcie myszą za pomocą JQuery. Czy ktoś może mnie poinformować, co robię źle.

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

kiedy klikam przycisk #foo, chcę zasymulować kliknięcie na #bar, jednak kiedy to robię, nic się nie dzieje. Próbowałem też, jQuery(document).ready(function(){...})ale bez powodzenia.

lickmycode
źródło
2
jQuery triggerdziała tylko po dodaniu zdarzenia „jQuery click”. W przeciwnym razie nie będziesz w stanie nic zrobić w ten sposób;
Reza Mamun,
3
Jest to środek bezpieczeństwa wbudowany w przeglądarkę. Zobacz odpowiedź @ Blazemongera: stackoverflow.com/questions/7999806/…
sanchez
1
@ san.chez Interesujące, dzięki za informację, nie wiedziałem wcześniej o tym zabezpieczeniu!
lickmycode

Odpowiedzi:

277

Musisz użyć jQuery('#bar')[0].click(); do symulacji kliknięcia myszą w rzeczywisty element DOM (nie obiekt jQuery), zamiast używać.trigger() metody jQuery.

Uwaga: DOM Level 2 .click()nie działa z niektórymi elementami w Safari . Będziesz musiał użyć obejścia.

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

Alex W.
źródło
18
uratowałeś mi dzień $ ('# asd') [0] .click ();
waza123
Służy do kliknięcia następnej zakładki w polach jQuery ACF: $ ('. Next'). Click (function () {$ ('# primary li.active'). Next (). Find ('. Acf-tab-button ') [0] .click ();});
Tisch
1
dzięki. Działa na komputerach stacjonarnych. Ale na urządzeniach mobilnych (Android Chrome) tak nie jest. jakieś sugestie?
kk-dev11
Z jakiegoś powodu niszczy to hash w bieżącym adresie URL.
luis
1
jeśli jednym z hrefów w tagu <a jest „#”, wystarczyłoby. <a zwykle przekierowuje do innego adresu URL. Musisz zatrzymać to za pomocą ev.preventDefault () i ev.stopPropagation (), zanim funkcja obsługi kliknięć powróci. LUB, użyj innego tagu oprócz <a; możesz dołączyć moduły obsługi kliknięć do wszystkiego, co jest widoczne.
OsamaBinLogin
43

Musisz tylko ustawić mały limit czasu, zanim zrobisz .click() to w ten sposób:

setTimeout(function(){ $('#btn').click()}, 100);
Ashish Khurana
źródło
Działa idealnie, jeśli próbujesz symulować kliknięcie podczas ładowania strony.
Gabriel Dzul
33

To jest zachowanie JQuery. Nie jestem pewien, dlaczego to działa w ten sposób, uruchamia tylko funkcję onClick w linku.

Próbować:

jQuery(document).ready(function() {
    jQuery('#foo').on('click', function() {
        jQuery('#bar')[0].click();
    });
});
Filip Górny
źródło
Dzięki za wyjaśnienie. Bardzo irytujące zachowanie jQuery, ale twój kod działa.
lickmycode
W ogóle nie irytujące. trigger()ma na celu wykonanie części kodu JavaScript zdarzenia kliknięcia . Jest to bardzo podobne do tworzenia function var() {}wielokrotnie używanego pliku .
21

Zobacz moje 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!
        }
    });
}
Reza Mamun
źródło
Zawinąłbym this.click();welse if(this.click)
Alex W.
15

Może być użyteczne:

Kod, który wywołuje wyzwalacz, powinien przejść po wywołaniu zdarzenia.

Na przykład mam kod, który chcę wykonać, gdy wartość #expense_tickets zostanie zmieniona, a także, gdy strona zostanie ponownie załadowana

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

})
Albert Català
źródło
4
Ach, to też był mój problem! Był zdumiony, dlaczego trigger()nie działa. Okazało się, że miałem ustawiony kod wyzwalacza POWYŻEJ funkcji, którą wywoływał - więc zaczep nie był na miejscu. No!
Andrew Newby,
5

jQuery's .trigger('click'); spowoduje tylko wyzwolenie zdarzenia dla tego zdarzenia, nie wyzwoli również domyślnej akcji przeglądarki.

Możesz zasymulować tę samą funkcjonalność za pomocą następującego kodu JavaScript:

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;
    }
});
Alexander O'Mara
źródło
2

Spróbuj tego, który działa dla mnie:

$('#bar').mousedown();
Henz
źródło
0

Wypróbowałem dwie najlepsze odpowiedzi, ale nie zadziałało, dopóki nie usunąłem „display: none” z elementów wejściowych mojego pliku. Potem wróciłem do .trigger (), to też działało w Safari dla Windows.

Podsumowując, nie używaj display: none; aby ukryć dane wejściowe pliku , możesz zamiast tego użyć krycia: 0.

Himanshu Saini
źródło
0

Technicznie nie jest to odpowiedź na to pytanie, ale dobre wykorzystanie zaakceptowanej odpowiedzi ( https://stackoverflow.com/a/20928975/82028 ) do tworzenia przycisków next i prev dla zakładek w polach 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();
});
Tisch
źródło
0

Po prostu użyj tego:

$(function() {
 $('#watchButton').click();
});
Sanath LS
źródło
-3

Nie możesz zasymulować zdarzenia kliknięcia za pomocą JavaScript. .trigger()Funkcja jQuery wywołuje tylko zdarzenie o nazwie „click” na elemencie, które można przechwycić .on()metodą jQuery.

yachaka
źródło
9
„Nie możesz zasymulować zdarzenia kliknięcia za pomocą javascript” - tak, możesz .
nnnnnn
Źle ... możesz symulować zdarzenie kliknięcia za pomocą javascript / jquery i możesz przechwytywać zdarzenie kliknięcia wyzwalającego za pomocą .click bez włączonego.
Aerious