Comment simuler un clic d'ancre via jquery?

j'ai un problème avec la falsification d'un clic d'ancre via jQuery: Pourquoi ma thickbox apparaît-elle la première fois que je clique sur le bouton input, 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>

il fonctionne toujours quand je clique directement sur le lien, mais pas si j'essaie d'activer la boîte épaisse via le bouton d'entrée. C'est dans FF. Pour Chrome, il semble fonctionner à chaque fois. Tous les conseils?

140
demandé sur Hunsu 2009-04-21 21:18:12

17 réponses

essayez d'éviter de lancer vos appels jQuery comme ça. Mettez une étiquette de script en haut de la page pour lier à click l'é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>

Edit:

si vous essayez de simuler un utilisateur en cliquant physiquement sur le lien, alors je ne crois pas que ce soit possible. Une solution serait de mettre à jour l'événement click du bouton pour changer le window.location en Javascript: 

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

Edit 2:

maintenant que je réalise que Thickbox est un widget UI custom jQuery, j'ai trouvé les instructions ici :

Instructions:

  • créer un élément de lien ( <a href> )
  • donne au lien un attribut de classe avec une valeur de thickbox ( class="thickbox" )
  • dans l'attribut href du lien ajouter l'ancre suivante: #TB_inline

  • dans l'attribut href après #TB_inline ajouter la chaîne de requête suivante à l'ancre:

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

  • changez les valeurs de hauteur, largeur, 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 une boîte épaisse.

  • vous pouvez éventuellement 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'une boîte épaisse nécessitera d'appeler la fonction tb_remove() à partir de L'intérieur de la boîte épaisse. Voir l'exemple de contenu modal caché, où vous devez cliquer oui ou non pour fermer la boîte épaisse.
121
répondu John Rasch 2009-04-21 18:25:34

ce qui a fonctionné pour moi était: 

$('a.mylink')[0].click()
187
répondu Stevanicus 2012-07-15 23:38:53

j'ai récemment trouvé comment déclencher l'é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>
19
répondu Jure 2010-02-04 11:10:10

cette approche fonctionne sur firefox, chrome et IE. espérons 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) {}
8
répondu Damian 2012-02-07 13:11:59

le titre de la question dit " Comment puis-je simuler un clic d'ancre dans jQuery?". 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>

N'a pas été testé, ce script, mais j'ai utilisé trigger et al avant, et ils ont travaillé très bien.

UPDATE

triggerHandler ça ne fait pas vraiment ce que L'OP veut. Je pense que 1421968 fournit le la meilleure réponse à cette question.

6
répondu elo80ka 2017-05-23 12:26:27

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

recherchez la fonction BrowserBot.prototype.triggerMouseEvent .

5
répondu Sébastien RoccaSerra 2013-07-19 16:37:30

bien que cette question soit très ancienne, j'ai trouvé quelque chose de plus facile à gérer. Il s'agit de jQuery plugin développé par jquery UI team 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 très bien en chrome, firefox, opera et IE10.vous pouvez le télécharger à partir de https://github.com/eduardolundgren/jquery-simulate/blob/master/jquery.simulate.js

5
répondu Ruwanka Madhushan 2013-08-08 17:16:39

je crois que vous pouvez utiliser: 

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

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

cela déclenchera facilement la fonction clic, sans vraiment cliquer dessus.

4
répondu Deepak 2013-08-21 22:58:54

avez-vous besoin de simuler un clic d'ancre? Du site de thickbox:

ThickBox peut être invoqué à partir d'un élément link, d'un élément input (typiquement un bouton), et de l'élément area (image maps).

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

si ce n'est pas le cas, je recommande D'utiliser Firebug et de placer un point de rupture dans la méthode onclick de l'élément anchor pour voir s'il n'est déclenché qu'au premier clic.

Edit:

D'accord, j'ai dû essayer pour moi-même et pour moi à peu près exactement votre code a fonctionné à 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 peu importe si je clique sur l'entrée ou 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 trouvé sur la page thickbox - jquery 1.3.2 et thickbox 3.1.

2
répondu waxwing 2009-04-21 18:47:49

vous pouvez créer un formulaire via jQuery ou dans le code de 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();
2
répondu Rus Miller 2010-03-11 23:58:23

pour simuler un clic sur une ancre tout en atterrissant 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
répondu Julien 2012-01-05 07:20:24

si vous n'avez pas besoin D'utiliser JQuery, comme moi. J'ai eu des problèmes avec le navigateur croisé func de .click() . J'utilise donc: 

eval(document.getElementById('someid').href)
2
répondu Craig 2012-04-12 20:30:38

en Javascript vous pouvez faire comme ceci 

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");
2
répondu Yashpal Singla 2013-02-06 12:44:24

en utilisant le script de Jure j'ai fait ceci, pour facilement "cliquer" autant d'éléments que vous voulez.

Je l'ai juste utilisé Google Reader sur 1600 + articles et il a fonctionné parfaitement (dans Firefox)! 

var e = document.createEvent('MouseEvents');
e.initEvent( 'click', true, true );
$(selector).each(function(){this.dispatchEvent(e);});
1
répondu bfred.it 2010-04-22 23:10:08

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

si vous voulez déclencher les clics automatiques de l'Utilisateur faire ce qui suit: 

window.setInterval(function() 
    {
        $('#left').triggerHandler('click');
    }, 1000);
1
répondu Singh 2011-10-18 20:46:16

cela ne fonctionne pas sur android native browser pour cliquer sur "Entrée cachée (fichier) élément": 

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

mais ça marche: 

$("#input-file").show();
$("#input-file")[0].click();
$("#input-file").hide();
0
répondu horse 2015-02-16 21:54:51

en essayant de simuler un "clic" dans les tests unitaires avec le jQuery UI spinner, Je n'ai pu obtenir aucune des réponses précédentes pour travailler. En particulier, j'essayais de simuler le "spin" de la sélection de la flèche vers le bas. J'ai regardé le jQuery UI spinner tests unitaires et ils utilisent la méthode suivante, qui a fonctionné pour moi: 

element.spinner( "widget" ).find( ".ui-spinner-up" ).mousedown().mouseup();
0
répondu wbdarby 2015-04-20 19:12:26