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

jquery triggers click Patrioticcow
źródło
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źć. :)

Kit Sunde
źródło
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!!!
Graham Hotchkiss
źródło
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 :)

Alex
źródło
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.

Julz
źródło
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();
});
Anand Pal
źródło
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');
Ady Ngom
źródło
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>
Harshad Hirapara
źródło
3

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

eval($(selector).attr('href'));
Jestem w
źródło
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.

Matthew Vines
źródło
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/

George Filippakis
źródło
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