Comment simuler un clic d'ancrage via jquery?


144

J'ai un problème avec la simulation d'un clic d'ancrage via jQuery: Pourquoi ma Thickbox apparaît-elle la première fois que je clique sur le bouton d'entrée, mais pas la deuxième ou la troisième fois?

Voici mon code:

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

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

Cela fonctionne toujours lorsque je clique directement sur le lien, mais pas si j'essaye d'activer la Thickbox via le bouton d'entrée. C'est en FF. Pour Chrome, cela semble fonctionner à chaque fois. Des indices?


1
Vous oubliez le code ici. Aucun code n'est associé à l'événement de clic pour l'ancre que vous nous avez montrée. Que fait ce code? Y a-t-il un autre code impliqué?
Matt

1
@Matt Si vous utilisez la méthode click sans paramètres, elle n'est plus interprétée comme une liaison d'événement, elle CLIQUera réellement (comme si vous deviez cliquer avec votre souris) sur l'élément auquel il est enchaîné. Dans ce cas, lorsque l'utilisateur clique sur l'élément d'entrée, il faut également cliquer sur l'élément avec l'ID 'thickboxId'.
KyleFarris

3
@KyleFarris: l'événement click () ne fonctionne pas sur Chrome ou Safari à moins que l'élément sur lequel cliquer ne soit associé à un événement onclick, et ne déclenchera toujours que cette partie et ne naviguera pas jusqu'à la valeur href. Dans le cas ci-dessus, il souhaite qu'il accède à la propriété href de la balise A, comme si l'utilisateur avait cliqué sur le lien.
Senseful

Réponses:


123

Essayez d'éviter d'incruster vos appels jQuery comme ça. Mettez une balise de script en haut de la page pour se lier à l' clickévénement:

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

Éditer:

Si vous essayez de simuler un utilisateur cliquant physiquement sur le lien, je ne pense pas que ce soit possible. Une solution de contournement serait de mettre à jour l' clickévénement du bouton pour changer le window.locationJavascript:

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

Modifier 2:

Maintenant que je réalise que Thickbox est un widget d'interface utilisateur jQuery personnalisé, j'ai trouvé les instructions ici :

Instructions:

  • Créer un élément de lien ( <a href>)

  • Donnez au lien un attribut de classe avec une valeur de thickbox ( class="thickbox")

  • Dans l' hrefattribut du lien, ajoutez l'ancre suivante:#TB_inline

  • Dans l' hrefattribut après le, #TB_inlineajoutez la chaîne de requête suivante à l'ancre:

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

  • Modifiez les valeurs de height, width et inlineId dans la requête en conséquence (inlineID est la valeur ID de l'élément qui contient le contenu que vous souhaitez afficher dans un ThickBox.

  • Facultativement, vous pouvez ajouter modal = true à la chaîne de requête (par exemple #TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true) de sorte que la fermeture d'un ThickBox nécessitera d'appeler la tb_remove()fonction depuis le ThickBox. Consultez l'exemple de contenu modal masqué, dans lequel vous devez cliquer sur oui ou non pour fermer le ThickBox.


window.location dans le gestionnaire de clics ne fonctionne pas, car alors le Thickbox ne fonctionne pas comme prévu.
prinzdezibel

Dans le deuxième exemple, il peut être conseillé d'utiliser .prop()au lieu de attr()pour obtenir l'url résolue.
Kevin Bowersox

Je suis surpris que ce soit la réponse acceptée. Le déclencheur de clic fonctionnera uniquement sur l'élément DOM natif, pas sur l'élément wrapper jQuery. Ceci est discuté par @Stevanicus et ses commentaires, ainsi que sur plusieurs autres messages SO. La réponse devrait être changée en celle de Stevanicus.
Oliver

@Schollii - n'hésitez pas à le modifier selon l'exactitude souhaitée.
John Rasch

3
Je voulais dire que la réponse acceptée devrait être celle de @stevanicus
Oliver

194

Ce qui a fonctionné pour moi était:

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

1
. fait don que la partie suivante est un nom de classe. # serait pour un identifiant.
Stevanicus

3
S'il est nécessaire pour une entrée, utilisez à la focusplace de click:)
Andrius Naruševičius

Cela fonctionne aussi pour moi, mais pourquoi cela fonctionne-t-il? Pourquoi $ ('a.mylink') [0] .click () fonctionne-t-il alors que $ ('a.mylink'). Eq (0) .click () ne fonctionne pas?
ChrisC

4
[0]indique le premier élément du tableau - un sélecteur renvoie 0 ou plusieurs éléments lorsqu'il est exécuté. C'est dommage que .click()cela ne semble pas fonctionner directement ici car apparemment d'autres invocations sont appliquées à des collections d'éléments provenant de sélecteurs de manière cohérente dans le cadre.
cfeduke

8
Utilisation [0]ou .get(0)sont les mêmes. Ceux-ci utilisent la version DOM de l'élément, au lieu de la version jQuery. La .click()fonction dans ce cas n'est pas l'événement de clic jQuery, mais l'événement natif.
Radley Sustaire

19

J'ai récemment trouvé comment déclencher un événement de clic de souris via jQuery.

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

1
Je ne pense pas que cela fonctionne dans IE, du moins pas 7 ou 8, car il ne semble pas y avoir de méthode createEvent sur le document.
Jeremy

Comme le dit eagle, cela fonctionne dans les navigateurs Webkit. Mais notez que vous n'utilisez pas vraiment jQuery ici (autre que la sélection $)
tokland

1
il manque la moitié de la magie: stackoverflow.com/questions/1421584/…
daniloquio

9

cette approche fonctionne sur Firefox, Chrome et IE. j'espère que cela aide quelqu'un:

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

Très utile et la meilleure option en raison de la compatibilité croisée à mon avis. Je n'aime pas avoir à tout emballer dans des blocs try / catch, mais je comprends que cela est fait pour faire des tentatives en cascade pour chaque navigateur.
h0r53

8

Bien que cette question soit très ancienne, j'ai trouvé quelque chose de plus facile à gérer cette tâche. Il s'agit du plugin jquery développé par l'équipe d'interface utilisateur jquery appelé simulate. vous pouvez l'inclure après jquery et ensuite vous pouvez faire quelque chose comme

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

fonctionne bien dans Chrome, Firefox, Opera et IE10.vous pouvez le télécharger à partir de https://github.com/eduardolundgren/jquery-simulate/blob/master/jquery.simulate.js


Une caractéristique clé de simulate()est qu'il envoie les événements jQuery et déclenche l'action native du navigateur. C'est maintenant la bonne réponse +1
Gone Coding

Fonctionne comme un charme et cela me permet d'ouvrir la page dans un nouvel onglet lorsque l'utilisateur clique sur un bouton dans ma grille kendo.
John Sully

6

Le titre de la question dit "Comment puis-je simuler un clic d'ancrage dans jQuery?". Eh bien, vous pouvez utiliser les méthodes "trigger" ou "triggerHandler", comme ceci:

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

Pas testé, ce script réel, mais j'ai utilisé triggeret al avant, et ils ont bien fonctionné.

METTRE À JOUR
triggerHandler ne fait pas vraiment ce que l'OP veut. Je pense que 1421968 fournit la meilleure réponse à cette question.


5

Je suggère de regarder l'API Selenium pour voir comment ils déclenchent un clic sur un élément d'une manière compatible avec le navigateur:

Recherchez la BrowserBot.prototype.triggerMouseEventfonction.


4

Je pense que vous pouvez utiliser:

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

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

Cela déclenchera facilement la fonction de clic, sans cliquer dessus.


2

Avez-vous besoin de simuler un clic d'ancrage? Depuis le site Thickbox:

ThickBox peut être appelé à partir d'un élément de lien, d'un élément d'entrée (généralement un bouton) et de l'élément de zone (cartes d'image).

Si cela est acceptable, il devrait être aussi simple que de mettre la classe Thickbox sur l'entrée elle-même:

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

Sinon, je recommanderais d'utiliser Firebug et de placer un point d'arrêt dans la méthode onclick de l'élément d'ancrage pour voir s'il n'est déclenché qu'au premier clic.

Éditer:

D'accord, j'ai dû l'essayer pour moi-même et pour moi à peu près exactement votre code fonctionnait à la fois dans Chrome et 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>

La fenêtre apparaît que je clique sur l'entrée ou sur l'élément d'ancrage. Si le code ci-dessus fonctionne pour vous, je suggère que votre erreur se trouve ailleurs et que vous essayez d'isoler le problème.

Une autre possibilité est que nous utilisons différentes versions de jquery / thickbox. J'utilise ce que j'ai obtenu de la page Thickbox - jquery 1.3.2 et thickbox 3.1.


Oui, j'ai besoin de le simuler et oui, le gestionnaire de clics fonctionne. Mais en fait, je n'ai pas du tout défini l'événement onclick et cela fonctionne, mais seulement la première fois. Mais aussi avec onclick géré dans thickboxId cela ne fonctionnera pas.
prinzdezibel

Ce que je voulais dire, c'était de vérifier que le clic dans l'élément d'ancrage est déclenché chaque fois que vous cliquez sur l'élément d'entrée. Oh, et voyez ma modification ci-dessus.
waxwing

2

Vous pouvez créer un formulaire via jQuery ou dans le code de la page HTML avec une action qui imite votre lien 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();

Cette méthode provoque le rechargement de la page entière plutôt que de simplement sauter à une ancre. De plus, il ajoute également le "?" à l'URL pour que la page devienne example.com?#test au lieu de example.com # test . Testé sur Chrome et Safari.
Senseful

En FF, cela fonctionnera bien. Dans les navigateurs Webkit, vous obtiendrez des URL comme décrit par Senseful. Mais ce n'est pas un problème, n'est-ce pas?
sdepold

2

Pour simuler un clic sur une ancre lors de l'atterrissage sur une page, je viens d'utiliser jQuery pour animer la propriété scrollTop dans $(document).ready.Pas besoin d'un déclencheur complexe, et cela fonctionne sur IE 6 et tous les autres navigateurs.


2

Si vous n'avez pas besoin d'utiliser JQuery, ce n'est pas le cas. J'ai eu des problèmes avec la fonction cross browser de .click(). J'utilise donc:

eval(document.getElementById('someid').href)

Rapide et sale, mais a fonctionné pour moi. Dans jQuery c'est eval ($ ("# someid"). Attr ("href"));
mhenry1384

2

En Javascript, vous pouvez faire comme ça

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

et vous pouvez l'utiliser comme

submitRequest("target-element-id");

1

En utilisant le script de Jure, j'ai fait ceci, pour "cliquer" facilement sur autant d'éléments que vous le souhaitez.
Je viens de l'utiliser Google Reader sur plus de 1600 éléments et cela a parfaitement fonctionné (dans Firefox)!

var e = document.createEvent('MouseEvents');
e.initEvent( 'click', true, true );
$(selector).each(function(){this.dispatchEvent(e);});

Je ne pense pas que cela fonctionne dans IE, du moins pas 7 ou 8, car il ne semble pas y avoir de méthode createEvent sur le document.
Jeremy

Je crois que document.createEventObject () devrait être utilisé dans IE à la place, mais je ne l'ai pas essayé.
fregante

@ bfred.it: Il semble que createEventObjectdans IE il s'agit plus de créer un objet événement à transmettre aux gestionnaires que de distribuer un événement synthétique. Les IE sont fireEventpeut-être plus proches dispatchEvent, mais cela ne déclenchera que les écouteurs - pas les actions du navigateur par défaut. Cependant, dans IE, vous pouvez simplement appeler la clickméthode.
theazureshadow

1

JQuery('#left').triggerHandler('click');fonctionne très bien dans Firefox et IE7. Je ne l'ai pas testé sur d'autres navigateurs.

Si vous souhaitez déclencher des clics d'utilisateurs automatiques, procédez comme suit:

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

1

Cela ne fonctionne pas sur le navigateur natif Android pour cliquer sur "élément d'entrée (fichier) caché":

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

Mais cela fonctionne:

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

0

En essayant de simuler un «clic» dans les tests unitaires avec le spinner de l'interface utilisateur jQuery, je n'ai pas réussi à faire fonctionner les réponses précédentes. En particulier, j'essayais de simuler la «rotation» de la sélection de la flèche vers le bas. J'ai regardé les tests unitaires de jQuery UI spinner et ils utilisent la méthode suivante, qui a fonctionné pour moi:

element.spinner( "widget" ).find( ".ui-spinner-up" ).mousedown().mouseup();
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.