Jak wywołać kliknięcie łącza za pomocą jQuery


238

Mam link:

<ul id="titleee" class="gallery">
  <li>
    <a href="#inline" rel="prettyPhoto">Talent</a>
  </li>
</ul>

i próbuję go uruchomić za pomocą:

$(document).ready(function() {
  $('#titleee').find('a').trigger('click');
});

Ale to nie działa.

Próbowałem też: $('#titleee a').trigger('click');

Edytuj :

Właściwie muszę uruchomić dowolne wezwanie <a href="#inline" rel="prettyPhoto">


7
location.href($('#titleee').find('a').attr("href"));?
Sylvain

3
lub nawet $ („ul.gallery”). find („li> a”). trigger („click”);
CarneyCode

114
Chłopaki Prawdziwa odpowiedź jest taka prosta. $('#titleee a')[0].click();. Innymi słowy, użyj metody kliknięcia DOM, a nie metody jQuery. Poprzyj Graham Hotchkiss !
Roman Starkov

5
@romkyns nie ma racji, ponieważ otwiera wyskakujące okienko zamiast nowej karty. ale kliknięcie manekina wewnątrz tego znacznika „a” służy temu celowi
Shishir Arora,

1
Jeśli próbujesz wywołać zdarzenie na kotwicy, kod, który posiadasz, zadziała. $('ul#titleee li a[href="#inline"]').click();
Anand Pal

Odpowiedzi:


307

Jeśli próbujesz wyzwolić zdarzenie na kotwicy, to kod, który masz działać, odtworzyłem twój przykład w jsfiddle z dodanym modułem eventHandler, abyś mógł zobaczyć, że działa:

$(document).on("click", "a", function(){
    $(this).text("It works!");
});

$(document).ready(function(){
    $("a").trigger("click");
});

Czy próbujesz zmusić użytkownika do przejścia do określonego punktu na stronie, klikając kotwicę, czy próbujesz wywołać powiązane z nią zdarzenia? Może faktycznie nie powiązałeś zdarzenia kliknięcia z wydarzeniem?

Także to:

$('#titleee').find('a').trigger('click');

jest odpowiednikiem tego:

$('#titleee a').trigger('click');

Nie musisz dzwonić znaleźć. :)


16
@Kit .find () jest szybszym selektorem niż to, co proponujesz, wykonaj test porównawczy, jeśli się nie zgadzasz, ale twoja propozycja go spowalnia. pozytywnie :-)
Ady Ngom

14
@mashappslabs - W porządku. Cieszę się, jeśli czujesz potrzebę przedwczesnej i mikrooptymalizacji, bez względu na to, jak prawdziwa. :)
Kit Sunde

5
@Kit ... więc kiedy robisz takie stwierdzenie, jak: „nie trzeba dzwonić, znajdź”, nie wchodzi ono w zakres przedwczesnej optymalizacji? Myślę, że tak, ale okazuje się, że jest wolniejszy niż początkowo proponowano. Nie odpowiadam ze względu na kłótnie, ale na wspólny wysiłek, aby poprawić to, co wszyscy kochamy robić. Mam nadzieję, że to wyjdzie dobrze :-)
Ady Ngom

5
@mashappslabs - Widząc jsperf.com po raz pierwszy pomyślałem, że wrócę i stwierdzę, że masz rację, w ogólnym przypadku Twoja metoda jest szybsza. Tylko Opera działa wolniej. jsperf.com/jquery-selector-perf-right-to-left/32
Kit Sunde

9
Co dziwne, powyższe nie działa dla mnie, ale odpowiedź @GrahamHotchkiss działa.
Oliver,

210

Przepraszamy, ale procedura obsługi zdarzeń nie jest naprawdę potrzebna. Potrzebny jest inny element tagu do kliknięcia.

<a id="test1" href="javascript:alert('test1')">TEST1</a>
<a id="test2" href="javascript:alert('test2')"><span>TEST2</span></a>

Jquery:

$('#test1').trigger('click'); // Nothing
$('#test2').find('span').trigger('click'); // Works
$('#test2 span').trigger('click'); // Also Works

Chodzi o to, co klikasz i nie chodzi o tag, ale o to, co w nim jest. Niestety sam tekst nie jest rozpoznawany przez JQuery, ale jest to przez javascript waniliowy:

document.getElementById('test1').click(); // Works!

Lub poprzez dostęp do obiektu jQuery jako tablicy

$('#test1')[0].click(); // Works too!!!

9
$ ('selektor') [0] .click () faktycznie obsłuży co najmniej jeden przypadek, w którym wywołanie modułu obsługi zdarzeń nie: wyświetlenie przez przeglądarkę rozpoznania go jako rzeczywistego kliknięcia w celu uruchomienia łącza modułu obsługi protokołu. Wywołanie wyzwalacza zdarzenia kliknięcia nie spowoduje uruchomienia powiązanej aplikacji. Dziękujemy za uwzględnienie go w swojej odpowiedzi!
Greg Pettit

3
Tak, .click()właśnie tego potrzebowałem!
notacouch

3
$ („# test2 span”). trigger („click”); pomógł, ponieważ może otworzyć adres URL w nowej karcie, ale $ ('# test1') [0] .click (); otwierał wyskakujący instea.
Shishir Arora,

Kiedy próbuję obsłużyć, kliknij element tła: $ ('# titleee a'). Trigger ('click'); -> Nie działa! $ ('# titleee a') [0] .click (); -> Działa!
sierpnia

1
$ ('# test1') [0] .click (); jest wybawcą. Wielkie dzięki
Amit Bisht

18

Ponieważ pytanie to znajduje się na pierwszym miejscu w Google pod względem „wywoływania kliknięcia <a>elementu” i żadna odpowiedź nie wspomina, jak to robisz, oto jak to zrobić:

$('#titleee a')[0].click();

Objaśnienie: uruchamiasz element clickna podstawowym elemencie HTML, a nie na obiekcie jQuery .

Nie ma za co, googlers :)


2
„wywołujesz kliknięcie na podstawowy element HTML, a nie obiekt jQuery.” - kliknęło to dla mnie, dziękuję!
Frish

5

Podany kod nie pozwala oczekiwać, że coś się wydarzy. Po drugie @mashappslabs: najpierw dodaj moduł obsługi zdarzeń:

$("selector").click(function() {
    console.log("element was clicked"); // or alert("click");
});

następnie uruchom wydarzenie:

$("selector").click(); //or
$("selector").trigger("click");

i powinieneś zobaczyć komunikat w konsoli.


5
To nie działa dla mnie: jeśli selektor jest „a” (tag HTML dla linków, żeby być czystym), anonimowa funkcja jest wywoływana, kiedy dzwonię trigger, ale akcja tagu nie ma miejsca. To tak, jakby zdarzenie nie propagowało się do powiązanego elementu DOM. Odpowiedź @GrahamHotchkiss jest jedyną, która działa dla mnie niezawodnie.
Oliver,

5

Jeśli próbujesz wywołać zdarzenie na kotwicy, kod, który posiadasz, zadziała.

$(document).ready(function() {
  $('a#titleee').trigger('click');
});

LUB

$(document).ready(function() {
  $('#titleee li a[href="#inline"]').click();
});

LUB

$(document).ready(function() {
  $('ul#titleee li a[href="#inline"]').click();
});

3

Cóż, musisz najpierw skonfigurować zdarzenie kliknięcia, a następnie możesz je uruchomić i zobaczyć, co się stanie:

//good habits first let's cache our selector
var $myLink = $('#titleee').find('a');
$myLink.click(function (evt) {
  evt.preventDefault();
  alert($(this).attr('href'));
});

// now the manual trigger
$myLink.trigger('click');

3

To jest demo, jak wywołać zdarzenie

<!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("input").select(function(){
            $("input").after(" Text marked!");
        });
        $("button").click(function(){
            $("input").trigger("select");
        });
    });
    </script>
    </head>
    <body>

    <input type="text" value="Hello World"><br><br>

    <button>Trigger the select event for the input field</button>

    </body>
    </html>

3

W przypadku linków powinno to działać:

eval($(selector).attr('href'));

2

To nie odpowiada dokładnie na twoje pytanie, ale zapewni ci ten sam wynik przy mniejszym bólu głowy.

Zawsze mam metody wywoływania zdarzeń kliknięcia, które zawierają całą logikę, którą chciałbym wykonać. Mogę po prostu wywołać metodę bezpośrednio, jeśli chcę wykonać akcję bez faktycznego kliknięcia.


2

Powinieneś wywołać rodzimą .click()metodę elementu lub użyć createEventinterfejsu API.

Aby uzyskać więcej informacji, odwiedź stronę: https://learn.jquery.com/events/triggering-event-handlers/


6
Witamy w Stack Overflow! Chociaż może to być cenna wskazówka do rozwiązania problemu, dobra odpowiedź pokazuje również rozwiązanie. Proszę edit dostarczyć przykładowy kod, aby pokazać to, co masz na myśli. Możesz też rozważyć napisanie tego jako komentarza.
Toby Speight
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.