web-dev-qa-db-fra.com

Comment puis-je simuler un clic d'ancrage via jquery?

J'ai un problème avec le fait de simuler un clic d'ancrage via jQuery: Pourquoi ma grosse boîte 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'essaie d'activer le module épais via le bouton de saisie. Ceci est en FF. Pour Chrome, il semble que cela fonctionne à chaque fois. Des allusions?

jqueryhtmlonclickthickbox
143
prinzdezibel

Essayez d’éviter d’aligner vos appels jQuery de la sorte. Placez une balise de script en haut de la page pour créer un lien vers l'événement click:

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

Modifier:

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

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

Éditer 2:

Maintenant que je réalise que Thickbox est un widget jQuery UI 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'attribut href du lien, ajoutez l'ancre suivante: #TB_inline

  • Dans l'attribut href après le #TB_inline, ajoutez la chaîne de requête suivante à l'ancre:

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

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

  • 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 ThickBox nécessite d'appeler la fonction tb_remove() à partir de la ThickBox. Consultez l'exemple de contenu modal masqué, dans lequel vous devez cliquer sur Oui ou sur Non pour fermer la ThickBox.
123
John Rasch

Ce qui a fonctionné pour moi a été:

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

J'ai récemment découvert 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>
19
Jure

cette approche fonctionne sur firefox, chrome et IE. j'espère que ça 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
damian

Bien que ce soit une question très ancienne, j’ai trouvé quelque chose de plus facile à gérer. C'est un plugin jquery développé par l'équipe de jquery UI 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

7
Ruwanka Madhushan

Le titre de la question indique "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>

Non testé, ce script, mais j’ai utilisé trigger et al auparavant, et ils ont fonctionné parfaitement.

UPDATE
triggerHandler ne fait pas ce que le PO veut. Je pense que 1421968 fournit la meilleure réponse à cette question.

6
elo80ka

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

Recherchez la fonction BrowserBot.prototype.triggerMouseEvent.

5
Sébastien RoccaSerra

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 même cliquer dessus.

4
Deepak

Pour simuler un clic sur une ancre en atterrissant sur une page, je viens d'utiliser jQuery pour animer la propriété scrollTop dans $(document).ready. Il n'est pas nécessaire d'utiliser un déclencheur complexe, et cela fonctionne sur IE 6 et sur tous les autres. navigateur.

2
Julien

Si vous n'avez pas besoin d'utiliser JQuery, ce n'est pas le cas. J'ai eu des problèmes avec la fonction de navigation croisée de .click(). Donc j'utilise:

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

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

Vous pouvez créer un formulaire via jQuery ou dans le code de page HTML avec une action imitant 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
Rus Miller

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 area (cartes d'image).

Si cela est acceptable, cela 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 vous recommanderais d'utiliser Firebug et de placer un point d'arrêt dans la méthode onclick de l'élément anchor pour voir s'il est uniquement déclenché au premier clic.

Modifier:

D'accord, je devais l'essayer pour moi et pour moi, 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 s'ouvre, 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 situe 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 reçu de la page thickbox - jquery 1.3.2 et thickbox 3.1.

2
waxwing

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

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

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

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

Mais cela fonctionne:

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

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

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

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

En essayant de simuler un "clic" dans les tests unitaires avec la spinner de jQuery UI, je ne pouvais obtenir aucune des réponses précédentes au travail. J'essayais en particulier de simuler le "spin" 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();
0
wbdarby