Wie kann ich einen Ankerklick über jquery simulieren?

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?

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.

Was für mich funktioniert hat war:

$('a.mylink')[0].click()

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>

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) {}

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

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.

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

• selenium-browserbot.js

Suchen Sie nach der BrowserBot.prototype.triggerMouseEventFunktion.

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.

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.

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();

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.

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)

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

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);});

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);

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();

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();