it-swarm.com.de

Wie kann ich einen Ankerklick per JQuery simulieren?

Ich habe ein Problem damit, einen Ankerklick über jQuery vorzutäuschen: Warum erscheint meine Thickbox beim ersten Klicken auf die Eingabeschaltfläche, aber nicht 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 den Eingabeknopf zu aktivieren. Dies ist in FF. Für Chrome scheint es jedes Mal zu funktionieren. Irgendwelche Hinweise?

143
prinzdezibel

Vermeiden Sie es, Ihre jQuery-Aufrufe so zu inlinen. Fügen Sie oben auf der Seite ein Skript-Tag ein, um es an das Ereignis click zu binden:

<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 click -Ereignis der Schaltfläche zu aktualisieren, um den window.location In Javascript zu ändern:

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

Edit 2:

Nachdem mir klar geworden ist, dass Thickbox ein benutzerdefiniertes jQuery-UI-Widget ist, habe ich die Anweisungen gefunden hier :

Anleitung:

  • Erstellen Sie ein Link-Element (<a href>)
  • Weisen Sie dem Link ein Klassenattribut mit dem Wert thickbox zu (class="thickbox").
  • Fügen Sie im Attribut href des Links den folgenden Anker hinzu: #TB_inline
  • Fügen Sie im href -Attribut nach dem #TB_inline Die folgende Abfragezeichenfolge zum Anker hinzu:

    ? height = 300 & width = 300 & inlineId = myOnPageContent

  • Ändern Sie die Werte für height, width und inlineId in der Abfrage entsprechend (inlineID 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 Funktion tb_remove() in der ThickBox aufgerufen werden muss. Sehen Sie sich das Beispiel für verborgenen modalen Inhalt an, in dem Sie auf Ja oder Nein klicken müssen, um die ThickBox zu schließen.
123
John Rasch

Was bei mir funktioniert hat war:

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

Ich habe kürzlich herausgefunden, wie man ein Mausklick-Ereignis über jQuery auslöst.

    <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>
19
Jure

dieser Ansatz funktioniert auf Firefox, chrome und IE. Ich 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) {}
8
damian

Obwohl dies eine sehr alte Frage ist, fand ich etwas einfacher, um diese Aufgabe zu bewältigen. Es handelt sich um ein JQuery-Plugin, das vom JQuery-UI-Team mit dem Namen 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 einwandfrei in Chrome, Firefox, opera und IE10. Sie können es von https://github.com/eduardolundgren/jquery-simulate/blob/master/jquery.simulate herunterladen .js

7

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 aktuelle Skript, aber ich habe trigger et al zuvor verwendet, und sie arbeiteten a'ight.

[~ # ~] Update [~ # ~]
triggerHandler macht eigentlich nicht das, was der OP will. Ich denke 1421968 liefert die beste Antwort auf diese Frage.

6
elo80ka

Ich würde vorschlagen, die Selenium-API zu untersuchen, um zu sehen, wie sie einen Klick auf ein Element in einer browserkompatiblen Weise auslöst:

Suche nach BrowserBot.prototype.triggerMouseEvent Funktion.

Ich glaube, Sie können verwenden:

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

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

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

4
Deepak

Um einen Klick auf einen Anker zu simulieren, während ich auf einer Seite lande, habe ich jQuery verwendet, um die scrollTop-Eigenschaft in $(document).ready. zu animieren. Es ist kein komplexer Trigger erforderlich, und das funktioniert mit IE = 6 und jeder andere Browser.

2
Julien

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)
2
Craig

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");
2
Yashpal Singla

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

<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();
2
Rus Miller

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

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

Wenn das 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 in der onclick-Methode des anchor-Elements einen Haltepunkt zu platzieren, um festzustellen, ob es nur beim ersten Klick ausgelöst wird.

Bearbeiten:

Okay, ich musste es selbst ausprobieren und für mich funktionierte Ihr Code ziemlich genau sowohl in Chrome) als auch in 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 öffnet sich, egal ob ich auf die Eingabe oder das Ankerelement klicke. Wenn der obige Code für Sie funktioniert, schlage ich vor, dass Ihr Fehler an einer anderen Stelle liegt und Sie versuchen, das Problem einzugrenzen.

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

2
waxwing

Mit Jures Skript habe ich dies gemacht, um so viele Elemente wie Sie möchten einfach "anzuklicken".
Ich habe Google Reader für über 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);});
1
fregante

Dies funktioniert nicht in Android nativen Browsern, um auf "Verstecktes Eingabeelement (Dateielement)" zu klicken:

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

Aber das funktioniert:

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

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

Wenn Sie automatische Benutzer-Klicks auslösen möchten, gehen Sie wie folgt vor:

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

Beim Versuch, mit dem jQuery-UI-Drehknopf einen Klick in Komponententests zu simulieren, konnte ich keine der vorherigen Antworten zum Laufen bringen. Insbesondere habe ich versucht, den „Dreh“ der Auswahl des Abwärtspfeils zu simulieren. Ich habe mir die jQuery UI Spinner Unit Tests angesehen und sie verwenden die folgende Methode, die bei mir funktioniert hat:

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