So lösen Sie ein Klickereignis für das href-Element aus

80

Ich versuche, ein Klickereignis auf einem Hyperlink mit jQuery wie unten beschrieben auszulösen. Hyperlink hat keine ID, aber eine CSS-Klasse

 $(document).ready(function () {  $('.cssbuttongo').trigger('click'); }); 

Die obige Funktion funktioniert nicht. Dies ist der Hyperlink

<a href="hyperlinkurl" class="cssbuttongo">hyperlink anchor</a>
MonsterMMORPG
quelle
1
Da eine Klasse auf mehrere Elemente im DOM angewendet werden kann, scheint es keine gute Idee zu sein, einen Klick darauf auszulösen.
Igor Parra
1
NomikOS Sie haben sehr Recht, aber ich habe überprüft, ob ein anderes Element diese CSS-Klasse verwendet :)
MonsterMMORPG

Antworten:

77

Ich habe keine sachlichen Beweise, um dies zu beweisen, aber ich bin bereits auf dieses Problem gestoßen. Es scheint, dass sich das Auslösen eines click () -Ereignisses für ein <a>Tag nicht so verhält, wie Sie es beispielsweise mit einer Eingabeschaltfläche erwarten würden.

Die Problemumgehung, die ich verwendet habe, bestand darin, die Eigenschaft location.href im Fenster festzulegen, wodurch der Browser die Anforderungsressource wie folgt lädt:

$(document).ready(function()
{
      var href = $('.cssbuttongo').attr('href');
      window.location.href = href; //causes the browser to refresh and load the requested url
   });
});

Bearbeiten:

Ich würde eine js-Geige machen, aber die Art der Frage, die sich damit vermischt, wie jsfiddle einen Iframe zum Rendern von Code verwendet, macht dies zu einem No-Go.

Matthew Cox
quelle
Das ist die richtige Antwort. danke :) Ich habe auch bemerkt, dass das Klicken auf href nicht funktioniert.
MonsterMMORPG
@MonsterMMorpg Beachten Sie, dass dies nicht dazu führt, dass der Browser glaubt, dass es sich um eine direkte Benutzeraktion handelt. Verwenden Sie also mit Bedacht = D
Matthew Cox
Sollte es nicht var href = $ ('. Cssbuttongo') sein. Attr ('href');
Luci
7
Dies ignoriert die Möglichkeit, dass der Link auch ein onclickEreignis hat. Tun Sie dies einfach $('.cssbuttongo')[0].click(), um einen Klick in seiner Gesamtheit richtig zu simulieren.
Roman Starkov
Eigentlich funktioniert es nur auf der kompletten href. Da ich hier keinen Code einfügen konnte, lesen Sie bitte meine Antwort auf diesen Beitrag.
Alan Dong
208

Die native DOM-Methode macht das Richtige:

$('.cssbuttongo')[0].click();
                  ^
              Important!

Dies funktioniert unabhängig davon, ob hrefes sich um eine URL, ein Fragment (z. B. #blah) oder sogar eine handelt javascript:.

Beachten Sie, dass dies die DOM- clickMethode anstelle der jQuery- clickMethode aufruft (die sehr unvollständig ist und vollständig ignoriert wird href).

Roman Starkov
quelle
2
@ Timwi, ich wollte sagen, dass der erste $('.cssbuttongo').click(); // ignores href!nicht garantiert, dass er funktioniert. Letzteres funktioniert immer, da bei Verwendung von index [0] jQuery Object zu einem regulären JS-Objekt wird, das genau dem entspricht, den ein Browser verwendet. @ Wei Liu
Alan Dong
1
Genial! Sehr direkte und anschauliche Antwort.
Caiosm1005
11
Dies sollte die ausgewählte Antwort sein. Hat perfekt funktioniert!
Amit G
3
@AdilMalik Es funktioniert, weil jquery nicht das einzige ist, das eine click () -Methode hat. Dieser Code ruft die nicht jquery click () -Methode auf, es ist eine native DOM-Sache.
Roman Starkov
1
@ Timwi Ich biete jsfiddle hier an: jsfiddle.net/NabiKAZ/3gv90od5
Nabi KAZ
31

Zusätzlich zu Romkyns großartiger Antwort finden Sie hier einige relevante Dokumentationen / Beispiele.


DOM-Elemente haben eine native .click()Methode .

Die HTMLElement.click()Methode simuliert einen Mausklick auf ein Element.

Wenn click verwendet wird, wird auch das Klickereignis des Elements ausgelöst, das zu Elementen weiter oben im Dokumentbaum (oder in der Ereigniskette) sprudelt und deren Klickereignisse ebenfalls auslöst. Das Sprudeln eines Klickereignisses führt jedoch nicht dazu, dass ein <a>Element die Navigation initiiert, als ob ein echter Mausklick empfangen worden wäre. (mdn Referenz)

Relevante W3-Dokumentation .


Ein paar Beispiele ..

  • Sie können von einem jQuery-Objekt aus auf ein bestimmtes DOM-Element zugreifen: (Beispiel)

      $('a')[0].click();
    
  • Mit der .get()Methode können Sie ein DOM-Element aus einem jQuery-Objekt abrufen: (Beispiel)

      $('a').get(0).click();
    
  • Wie erwartet können Sie das DOM-Element auswählen und die .click()Methode aufrufen . (Beispiel)

      document.querySelector('a').click();
    

Es sei darauf hingewiesen, dass jQuery nicht erforderlich ist, um ein natives .click()Ereignis auszulösen .

Josh Crozier
quelle
4

Durch Auslösen eines Klicks über JavaScript wird kein Hyperlink geöffnet. Dies ist eine im Browser integrierte Sicherheitsmaßnahme.

In dieser Frage finden Sie jedoch einige Problemumgehungen.

Blazemonger
quelle
1
Ich glaube nicht. WEIL: Ich habe festgestellt, dass es so funktioniert . Folgen Sie der jsfiddle hier
Cody
3
@CodyDmd, bei dem es sich immer noch um ein vom Benutzer ausgelöstes Klickereignis handelt. Nicht dasselbe wie die ursprüngliche Frage von OP.
Blazemonger
@CodyDmd Es scheint, dass [0]in Ihrer Geige wichtig ist
Wei Liu
3
Vor welcher Sicherheitslücke schützt das genau?
Roman
3
Nun, ich weiß nicht, was du meinst, Blazemonger, weil es in Firefox, Chrome oder IE11 keinen solchen Schutz gegen Downloads oder SEO-Klickbetrug gibt. Mit anderen Worten, sowohl der erste als auch der zweite Satz Ihrer Antwort sind falsch .
Roman Starkov
3

Ich möchte euch nur wissen lassen, dass die akzeptierte Antwort nicht immer funktioniert.

Hier ist ein Beispiel, das fehlschlagen wird.

wenn <href='/list'>

href = $('css_selector').attr('href')
"/list"
href = document.querySelector('css_selector').href
"http://localhost/list"

oder Sie können die von jQuery erhaltene href an diese anhängen

href = document.URL +$('css_selector').attr('href');

oder jQuery Weg

href = $('css_selector').prop('href')

Rufen Sie es schließlich auf, um die URL der aktuellen Seite des Browsers zu ändern

window.location.href = href

oder Pop-out mit window.open(url)

Hier ist ein Beispiel in JSFiddle.

Alan Dong
quelle
Sie sagen also, dass dies nicht funktioniert, wenn Sie es ändern $('css_selector')[0].click()? Es funktioniert in dieser JsFiddle ...
Roman
Für die Aufzeichnung war es nicht ich, der herabgestimmt hat; Ich denke, hier könnte etwas sein und ich bin mir noch nicht sicher.
Roman
@romkyns, Natürlich wird es funktionieren, nachdem Sie mit [0] aus jQuery-Elementen extrahiert haben (es wird reines JS). Ich wollte damit sagen, dass $('.cssbuttongo').click();es nicht funktioniert, da es nur den Wert von href anstelle der URL von angibt Der Browser verwendet. Entschuldigung für die irreführenden Kommentare.
Alan Dong
2
@LinDong: Wenn du weißt, dass das [0].click()funktioniert, warum erwähnt deine Antwort das nicht?
Timwi
location.hrefAkzeptiert relative Pfade, sodass bei Verwendung /listautomatisch die aktuelle Domäne vorangestellt wird. Also funktioniert es.
Tim
-1

Ich hatte ein ähnliches Problem beim Klicken auf eine Schaltfläche anstelle eines Links. Es war nicht erfolgreich in den Methoden .trigger ('click') oder [0] .click (), und ich wusste nicht warum. Endlich hat folgendes für mich funktioniert:

$('#elementid').mousedown();
Henry
quelle