Wie kann ich einen Ankerklick über jquery simulieren?

144

Ich habe ein Problem mit dem Fälschen eines Ankerklicks über jQuery: Warum wird meine Thickbox beim ersten Klicken auf die Eingabeschaltfläche angezeigt, nicht jedoch beim zweiten oder dritten Mal?

Hier ist mein Code:

<input onclick="$('#thickboxId').click();" type="button" value="Click me" />

<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

Es funktioniert immer, wenn ich direkt auf den Link klicke, aber nicht, wenn ich versuche, die Thickbox über die Eingabetaste zu aktivieren. Dies ist in FF. Für Chrome scheint es jedes Mal zu funktionieren. Irgendwelche Hinweise?

prinzdezibel
quelle
1
Sie lassen hier den Code weg. Mit dem Klickereignis für den Anker, den Sie uns gezeigt haben, ist kein Code verknüpft. Was macht dieser Code? Gibt es noch einen anderen Code?
Matt
1
@Matt Wenn Sie die Klickmethode ohne Parameter verwenden, wird sie nicht mehr als Ereignisbindung interpretiert. Sie klickt tatsächlich auf das Element, mit dem es verkettet ist (als würden Sie mit der Maus klicken). In diesem Fall sollte beim Klicken auf das Eingabeelement auch auf das Element mit der ID 'thinboxId' geklickt werden.
KyleFarris
3
@KyleFarris: Das click () -Ereignis funktioniert in Chrome oder Safari nur, wenn an das zu klickende Element ein onclick-Ereignis angehängt ist, und löst dennoch nur diesen Teil aus und navigiert nicht zum href-Wert. Im obigen Fall möchte er, dass es zur href-Eigenschaft des A-Tags navigiert, als ob der Benutzer auf den Link geklickt hätte.
Sinnvoll

Antworten:

123

Vermeiden Sie es, Ihre jQuery-Aufrufe so einzuschleusen. Fügen Sie oben auf der Seite ein Skript-Tag ein, um eine Bindung an das clickEreignis herzustellen:

<script type="text/javascript">
$(function(){
    $('#thickboxButton').click(function(){
        $('#thickboxId').click();
    });
});
</script>

<input id="thickboxButton" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

Bearbeiten:

Wenn Sie versuchen, einen Benutzer zu simulieren, der physisch auf den Link klickt, glaube ich nicht, dass dies möglich ist. Eine Problemumgehung wäre, das clickEreignis der Schaltfläche zu aktualisieren , um das window.locationin Javascript zu ändern :

<script type="text/javascript">
$(function(){
    $('#thickboxButton').click(function(){
        window.location = $('#thickboxId').attr('href');
    });
});
</script>

Bearbeiten 2:

Nachdem ich festgestellt habe, dass Thickbox ein benutzerdefiniertes Widget für die jQuery-Benutzeroberfläche ist, habe ich die folgenden Anweisungen gefunden :

Anleitung:

  • Erstellen Sie ein Linkelement ( <a href>)

  • Geben Sie dem Link ein Klassenattribut mit dem Wert von dickbox ( class="thickbox")

  • Fügen Sie im hrefAttribut des Links den folgenden Anker hinzu:#TB_inline

  • Fügen Sie im hrefAttribut nach dem #TB_inlineHinzufügen der folgenden Abfragezeichenfolge zum Anker hinzu:

    height = 300 & width = 300 & inlineId = myOnPageContent

  • Ändern Sie die Werte für Höhe, Breite und Inline-ID in der Abfrage entsprechend (Inline-ID ist der ID-Wert des Elements, das den Inhalt enthält, den Sie in einer ThickBox anzeigen möchten.

  • Optional können Sie der Abfragezeichenfolge modal = true hinzufügen (z. B. #TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true), sodass zum Schließen einer ThickBox die tb_remove()Funktion aus der ThickBox heraus aufgerufen werden muss. Sehen Sie sich das Beispiel für versteckte modale Inhalte an, in dem Sie auf Ja oder Nein klicken müssen, um die ThickBox zu schließen.

John Rasch
quelle
window.location im Click-Handler funktioniert nicht, da dann die Thickbox nicht wie erwartet funktioniert.
prinzdezibel
Im zweiten Beispiel kann es ratsam sein, zu verwenden, .prop()anstatt attr()die aufgelöste URL zu erhalten.
Kevin Bowersox
Ich bin überrascht, dass dies die akzeptierte Antwort ist. Der Klick-Trigger funktioniert nur für das native DOM-Element, nicht für das jQuery-Wrapper-Element. Dies wird von @Stevanicus und Kommentaren sowie von mehreren anderen SO-Posts diskutiert. Die Antwort sollte in die von Stevanicus geändert werden.
Oliver
@Schollii - Sie können es jederzeit nach Ihren Wünschen bearbeiten.
John Rasch
3
Ich meinte, dass die akzeptierte Antwort die von @stevanicus sein sollte
Oliver
194

Was für mich funktioniert hat war:

$('a.mylink')[0].click()
Stevanicus
quelle
1
. spendet, dass der nächste Teil ein Klassenname ist. # wäre für eine ID.
Stevanicus
3
Wenn es für eine Eingabe benötigt wird, verwenden Sie focusanstelle von click:)
Andrius Naruševičius
Das funktioniert auch bei mir, aber warum funktioniert das? Warum funktioniert $ ('a.mylink') [0] .click (), $ ('a.mylink'). Eq (0) .click () nicht?
ChrisC
4
[0]gibt das erste Element des Arrays an - ein Selektor gibt bei seiner Ausführung 0 oder mehr Elemente zurück. Es ist bedauerlich, dass .click()dies hier nicht direkt zu funktionieren scheint, da scheinbar andere Aufrufe auf Sammlungen von Elementen von Selektoren konsistent im gesamten Framework angewendet werden.
cfeduke
8
Verwenden [0]oder .get(0)sind gleich. Diese verwenden die DOM-Version des Elements anstelle der jQuery-Version. Die .click()Funktion ist in diesem Fall nicht das jQuery-Klickereignis, sondern das native.
Radley Sustaire
19

Ich habe kürzlich herausgefunden, wie ein Mausklickereignis über jQuery ausgelöst wird.

    <script type="text/javascript">
    var a = $('.path > .to > .element > a')[0];
    var e = document.createEvent('MouseEvents');
    e.initEvent( 'click', true, true );
    a.dispatchEvent(e);
    </script>
Jure
quelle
1
Ich denke nicht, dass dies im IE funktioniert, zumindest nicht in 7 oder 8, da es anscheinend keine createEvent-Methode für das Dokument gibt.
Jeremy
Wie Eagle sagt, funktioniert dies in Webkit-Browsern. Beachten Sie jedoch, dass Sie jQuery hier nicht wirklich verwenden (außer der $ -Auswahl)
tokland
1
Hier fehlt die Hälfte der Magie: stackoverflow.com/questions/1421584/…
daniloquio
9

Dieser Ansatz funktioniert mit Firefox, Chrome und IE. hoffe es hilft jemandem:

var comp = document.getElementById('yourCompId');
try { //in firefox
    comp.click();
    return;
} catch(ex) {}
try { // in chrome
    if(document.createEvent) {
        var e = document.createEvent('MouseEvents');
        e.initEvent( 'click', true, true );
        comp.dispatchEvent(e);
        return;
    }
} catch(ex) {}
try { // in IE
    if(document.createEventObject) {
         var evObj = document.createEventObject();
         comp.fireEvent("onclick", evObj);
         return;
    }
} catch(ex) {}
Damian
quelle
Sehr hilfreich und die bessere Option aufgrund der Kreuzkompatibilität meiner Meinung nach. Ich mag es nicht, alles in Try / Catch-Blöcke zu packen, aber ich verstehe, dass dies getan wird, um Versuche für jeden Browser zu kaskadieren.
h0r53
8

Obwohl dies eine sehr alte Frage ist, fand ich etwas einfacher, um diese Aufgabe zu bewältigen. Es ist ein jquery-Plugin, das vom jquery-UI-Team namens simulate entwickelt wurde. Sie können es nach jquery einfügen und dann können Sie so etwas tun

<a href="http://stackoverflow.com/"></a>
$('a').simulate('click');

funktioniert gut in Chrome, Firefox, Oper und IE10. Sie können es von https://github.com/eduardolundgren/jquery-simulate/blob/master/jquery.simulate.js herunterladen

Ruwanka Madhushan
quelle
Ein wesentliches Merkmal simulate()ist , dass es die jQuery Ereignisse sendet sowie die Auslösung der nativen Browser Aktion. Dies ist jetzt die richtige Antwort +1
Gone Coding
Funktioniert wie ein Zauber und ermöglicht es mir, die Seite in einem neuen Tab zu öffnen, wenn der Benutzer auf eine Schaltfläche in meinem Kendo-Raster klickt.
John Sully
6

Der Fragentitel lautet "Wie kann ich einen Ankerklick in jQuery simulieren?". Nun, Sie können die Methoden "trigger" oder "triggerHandler" wie folgt verwenden:

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/thickbox.js"></script>
<script type="text/javascript">
$(function() {
    $('#btn').click(function() {
        $('#thickboxId').triggerHandler('click');
    })
})
</script>
...
<input id="btn" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

Nicht getestet, dieses eigentliche Skript, aber ich habe triggeret al schon einmal verwendet , und sie haben gut funktioniert.

UPDATE
triggerHandler macht eigentlich nicht das, was das OP will. Ich denke, 1421968 bietet die beste Antwort auf diese Frage.

elo80ka
quelle
5

Ich würde vorschlagen, die Selenium-API zu betrachten, um zu sehen, wie sie einen Klick auf ein Element auf browserkompatible Weise auslösen:

Suchen Sie nach der BrowserBot.prototype.triggerMouseEventFunktion.

Sébastien RoccaSerra
quelle
4

Ich glaube, Sie können verwenden:

$('#yourLink').bind('click', function() {
  //Do something over here
});

$('#yourLink').trigger('click');

Dadurch wird die Klickfunktion leicht ausgelöst, ohne dass Sie darauf klicken müssen.

Deepak
quelle
2

Müssen Sie einen Ankerklick vortäuschen? Von der Thickbox-Site:

ThickBox kann über ein Linkelement, ein Eingabeelement (normalerweise eine Schaltfläche) und das Bereichselement (Imagemaps) aufgerufen werden.

Wenn dies akzeptabel ist, sollte es so einfach sein, wie die Thickbox-Klasse auf die Eingabe selbst zu setzen:

<input id="thickboxButton" type="button" class="thickbox" value="Click me">

Wenn nicht, würde ich empfehlen, Firebug zu verwenden und einen Haltepunkt in die onclick-Methode des Ankerelements zu setzen, um festzustellen, ob dieser nur beim ersten Klick ausgelöst wird.

Bearbeiten:

Okay, ich musste es selbst ausprobieren und für mich funktionierte Ihr Code ziemlich genau in Chrome und Firefox:

<html>
<head>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
</head>
<body>
<script src="jquery-latest.pack.js" type="text/javascript"></script>
<script src="thickbox.js" type="text/javascript"></script>
<input onclick="$('#thickboxId').click();" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>
</body>
</html>

Das Fenster wird angezeigt, unabhängig davon, ob ich auf die Eingabe oder das Ankerelement klicke. Wenn der obige Code für Sie funktioniert, schlage ich vor, dass Ihr Fehler an anderer Stelle liegt und Sie versuchen, das Problem zu isolieren.

Eine andere Möglichkeit ist, dass wir verschiedene Versionen von jquery / thinbox verwenden. Ich verwende das, was ich von der Thickbox-Seite erhalten habe - jquery 1.3.2 und Thickbox 3.1.

Seidenschwanz
quelle
Ja, ich muss es fälschen und ja, der Klick-Handler selbst funktioniert. Tatsächlich habe ich das Onclick-Ereignis überhaupt nicht festgelegt und es funktioniert, sondern nur beim ersten Mal. Aber auch mit Onclick in ThickboxId wird es nicht funktionieren.
prinzdezibel
Ich wollte überprüfen, ob der Onclick im Ankerelement jedes Mal ausgelöst wird, wenn Sie auf das Eingabeelement klicken. Oh, und siehe meine Bearbeitung oben.
Waxwing
2

Sie können ein Formular über jQuery oder im HTML-Seitencode mit einer Aktion erstellen, die Ihren Link nachahmt href:

<a id="anchor_link" href="somepath.php">click here</a>.

var link = $('#anchor_link').attr('href');
$('body').append('<form id="new_form" action="'+link+'"></form>');
$('#new_form').submit();
Rus Miller
quelle
Diese Methode bewirkt, dass die gesamte Seite neu geladen wird, anstatt einfach zu einem Anker zu springen. Zusätzlich wird das "?" auf die URL, so dass die Seite example.com?#test anstelle von example.com # test wird . Getestet auf Chrome und Safari.
Sinnvoll
In FF wird dies gut funktionieren. In Webkit-Browsern erhalten Sie URLs wie beschrieben. Aber das ist kein Problem, nicht wahr?
Sdepold
2

Um einen Klick auf einen Anker während der Landung auf einer Seite zu simulieren, habe ich nur jQuery verwendet, um die scrollTop-Eigenschaft in $(document).ready.Keine Notwendigkeit für einen komplexen Trigger zu animieren. Dies funktioniert in IE 6 und jedem anderen Browser.

Julien
quelle
2

Wenn Sie JQuery nicht verwenden müssen, wie ich es nicht tue. Ich hatte Probleme mit der Cross-Browser-Funktion von .click(). Also benutze ich:

eval(document.getElementById('someid').href)
Craig
quelle
Schnell und dreckig, aber für mich gearbeitet. In jQuery ist dies eval ($ ("# someid"). Attr ("href"));
Mhenry1384
2

In Javascript können Sie dies tun

function submitRequest(buttonId) {
    if (document.getElementById(buttonId) == null
            || document.getElementById(buttonId) == undefined) {
        return;
    }
    if (document.getElementById(buttonId).dispatchEvent) {
        var e = document.createEvent("MouseEvents");
        e.initEvent("click", true, true);
        document.getElementById(buttonId).dispatchEvent(e);
    } else {
        document.getElementById(buttonId).click();
    }
}

und du kannst es gerne benutzen

submitRequest("target-element-id");
Yashpal Singla
quelle
1

Mit Jures Skript habe ich dies gemacht, um einfach so viele Elemente zu "klicken", wie Sie möchten.
Ich habe es gerade mit Google Reader für mehr als 1600 Artikel verwendet und es hat perfekt funktioniert (in Firefox)!

var e = document.createEvent('MouseEvents');
e.initEvent( 'click', true, true );
$(selector).each(function(){this.dispatchEvent(e);});
fregante
quelle
Ich denke nicht, dass dies im IE funktioniert, zumindest nicht in 7 oder 8, da es anscheinend keine createEvent-Methode für das Dokument gibt.
Jeremy
Ich glaube, dass document.createEventObject () stattdessen im IE verwendet werden sollte, aber ich habe es nicht versucht.
Fregante
@ bfred.it: Es scheint, dass createEventObjectIE eher dazu dient, ein Ereignisobjekt zu erstellen, das an Handler übergeben werden soll, als ein synthetisches Ereignis auszulösen . IE's fireEventsind zwar näher dispatchEventdran, lösen jedoch nur Listener aus - keine Standard-Browseraktionen. Im IE können Sie die clickMethode jedoch einfach aufrufen .
Theazureshadow
1

JQuery('#left').triggerHandler('click');funktioniert gut in Firefox und IE7. Ich habe es nicht in anderen Browsern getestet.

Wenn Sie automatische Benutzerklicks auslösen möchten, gehen Sie wie folgt vor:

window.setInterval(function() 
    {
        $('#left').triggerHandler('click');
    }, 1000);
Singh
quelle
1

Dies funktioniert nicht im nativen Android-Browser, um auf "verstecktes Eingabe- (Datei-) Element" zu klicken:

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

Aber das funktioniert:

$("#input-file").show();
$("#input-file")[0].click();
$("#input-file").hide();
Pferd
quelle
0

Beim Versuch, ein Klicken in Komponententests mit dem jQuery UI-Spinner zu simulieren, konnte ich keine der vorherigen Antworten zum Laufen bringen. Insbesondere habe ich versucht, den "Spin" der Auswahl des Abwärtspfeils zu simulieren. Ich habe mir die Spinner-Unit-Tests für jQuery UI angesehen und sie verwenden die folgende Methode, die für mich funktioniert hat:

element.spinner( "widget" ).find( ".ui-spinner-up" ).mousedown().mouseup();
wbdarby
quelle