So lösen Sie mit jQuery einen Klick auf einen Link aus

238

Ich habe einen Link:

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

und ich versuche es auszulösen, indem ich:

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

Aber es funktioniert nicht.

Ich habe auch versucht: $('#titleee a').trigger('click');

Bearbeiten :

Ich muss tatsächlich auslösen, was auch immer hier aufgerufen wird <a href="#inline" rel="prettyPhoto">

jquery triggers click Patriotische Kühe
quelle
7
location.href($('#titleee').find('a').attr("href"));?
Sylvain
3
oder sogar $ ('ul.gallery'). find ('li> a'). trigger ('click');
CarneyCode
114
Jungs. Die wirkliche Antwort ist so einfach. $('#titleee a')[0].click();. Mit anderen Worten, verwenden Sie die DOM-Klickmethode, nicht die jQuery-Methode. Upvote Graham Hotchkiss !
Roman Starkov
5
@romkyns nein, es ist nicht richtig, da es ein Popup anstelle eines neuen Tabs öffnet. Aber das Klicken auf eine Dummy-Spanne in diesem '
a'
1
Wenn Sie versuchen, ein Ereignis auf dem Anker auszulösen, funktioniert der Code, den Sie haben. $('ul#titleee li a[href="#inline"]').click();
Anand Pal

Antworten:

306

Wenn Sie versuchen, ein Ereignis auf dem Anker auszulösen, funktioniert der Code, den Sie haben. Ich habe Ihr Beispiel in jsfiddle mit einem hinzugefügten eventHandler neu erstellt, damit Sie sehen können, dass es funktioniert:

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

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

Versuchen Sie, den Benutzer durch Klicken auf den Anker zu einem bestimmten Punkt auf der Webseite zu navigieren, oder versuchen Sie, daran gebundene Ereignisse auszulösen? Vielleicht haben Sie das Klickereignis nicht erfolgreich an das Ereignis gebunden?

Auch das:

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

ist das Äquivalent dazu:

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

Keine Notwendigkeit, find anzurufen. :) :)

Kit Sunde
quelle
16
@Kit .find () ist eine schnellere Auswahl als das, was Sie vorschlagen. Führen Sie einen Benchmark durch, wenn Sie nicht einverstanden sind, Ihr Vorschlag ihn jedoch verlangsamt. positiv :-)
Ady Ngom
14
@mashappslabs - Das ist okay. Ich freue mich für Sie, wenn Sie das Bedürfnis haben, vorzeitige und Mikrooptimierungen durchzuführen, egal wie wahr dies ist. :)
Kit Sunde
5
@Kit ... Wenn Sie also eine Aussage wie "Keine Notwendigkeit, find aufzurufen" machen, fällt diese nicht in den Bereich der vorzeitigen Optimierung? Ich denke, das tut es, aber es ist einfach langsamer als ursprünglich vorgeschlagen. Ich antworte nicht aus Gründen der Argumentation, sondern für eine konzertierte Anstrengung, um besser zu werden, was wir alle gerne tun. Ich hoffe das kommt richtig raus :-)
Ady Ngom
5
@mashappslabs - Nachdem ich jsperf.com zum ersten Mal gesehen hatte, dachte ich, ich würde zurückkommen und sagen, dass Sie Recht haben, Ihre Methode ist im allgemeinen Fall schneller. Nur Opera ist langsamer. jsperf.com/jquery-selector-perf-right-to-left/32
Kit Sunde
9
Seltsamerweise funktioniert das oben genannte nicht für mich, aber die Antwort von @GrahamHotchkiss funktioniert.
Oliver
210

Entschuldigung, aber der Event-Handler wird wirklich nicht benötigt. Was Sie brauchen, ist ein weiteres Element innerhalb des Tags, auf das Sie klicken können.

<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

Hier geht es darum, auf was Sie klicken, und es ist nicht das Tag, sondern das Ding darin. Leider scheint Bare Text von JQuery nicht erkannt zu werden, aber es ist von Vanille-Javascript:

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

Oder indem Sie als Array auf das jQuery-Objekt zugreifen

$('#test1')[0].click(); // Works too!!!
Graham Hotchkiss
quelle
9
$ ('selector') [0] .click () behandelt tatsächlich mindestens einen Fall, den das Auslösen des Ereignishandlers nicht bewirkt: Der Browser erkennt ihn als tatsächlichen Klick zum Auslösen eines Protokollhandler-Links. Wenn Sie den Auslöser für das Klickereignis aufrufen, wird die zugehörige Anwendung nicht gestartet. Vielen Dank, dass Sie es in Ihre Antwort aufgenommen haben!
Greg Pettit
3
Ja, .click()genau das habe ich gebraucht!
Notacouch
3
$ ('# test2 span'). trigger ('click'); geholfen, da es eine URL in einem neuen Tab öffnen kann, aber $ ('# test1') [0] .click (); öffnete ein Pop-up-Instea.
Shishir Arora
Wenn ich versuche, auf das Hintergrundelement zu klicken: $ ('# titleee a'). Trigger ('click'); -> Funktioniert nicht! $ ('# titleee a') [0] .click (); -> Funktioniert!
18. August
1
$ ('# test1') [0] .click (); ist ein Retter. Vielen Dank
Amit Bisht
18

Da diese Frage in Google auf Platz 1 für "Auslösen eines Klicks auf ein <a>Element" steht und keine Antwort tatsächlich erwähnt, wie Sie das tun, gehen Sie folgendermaßen vor:

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

Erläuterung: Sie lösen ein clickfür das zugrunde liegende HTML-Element aus, nicht für das jQuery-Objekt .

Gern geschehen Googler :)

Alex
quelle
2
"Sie lösen einen Klick auf das zugrunde liegende HTML-Element aus, nicht auf das jQuery-Objekt." - das hat für mich geklickt , danke!
Frish
5

Mit dem von Ihnen angegebenen Code können Sie nicht erwarten, dass etwas passiert. Ich zweite @mashappslabs: zuerst einen Event-Handler hinzufügen:

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

dann lösen Sie Ihr Ereignis aus:

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

und Sie sollten die Nachricht in Ihrer Konsole sehen.

Julz
quelle
5
Dies funktioniert bei mir nicht: Wenn der Selektor "a" ist (HTML-Tag für Links, nur um klar zu sein), wird die anonyme Funktion beim Aufruf aufgerufen trigger, aber die Aktion des Tags findet nicht statt. Es ist, als würde sich das Ereignis nicht auf das zugehörige DOM-Element übertragen. Die Antwort von @GrahamHotchkiss ist die einzige, die für mich zuverlässig funktioniert.
Oliver
5

Wenn Sie versuchen, ein Ereignis auf dem Anker auszulösen, funktioniert der Code, den Sie haben.

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

ODER

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

ODER

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

Nun, Sie müssen zuerst das Klickereignis einrichten, dann können Sie es auslösen und sehen, was passiert:

//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
quelle
3

Dies ist die Demo zum Auslösen eines Ereignisses

<!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
quelle
3

Für Links sollte dies funktionieren:

eval($(selector).attr('href'));
Amin
quelle
2

Dies beantwortet Ihre Frage nicht genau, führt jedoch mit weniger Kopfschmerzen zum gleichen Ergebnis.

Ich habe immer meine Klickereignis-Aufrufmethoden, die die gesamte Logik enthalten, die ich ausführen möchte. Damit kann ich die Methode einfach direkt aufrufen, wenn ich die Aktion ohne einen tatsächlichen Klick ausführen möchte.

Matthew Vines
quelle
2

Sie sollten die native .click()Methode des Elements aufrufen oder die createEventAPI verwenden.

Weitere Informationen finden Sie unter: https://learn.jquery.com/events/triggering-event-handlers/

George Filippakis
quelle
6
Willkommen bei Stack Overflow! Während dies ein wertvoller Hinweis zur Lösung des Problems sein kann, zeigt eine gute Antwort auch die Lösung. Bitte bearbeiten Sie , um einen Beispielcode bereitzustellen, der zeigt, was Sie meinen. Alternativ können Sie dies stattdessen als Kommentar schreiben.
Toby Speight