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

Question

J'ai un problème avec un semblant d'ancrage par clic jQuery: Pourquoi mon thickbox apparaît la première fois que je clique sur le bouton d'entrée, mais pas la deuxième ou 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 ne fonctionne toujours lorsque je clique directement sur le lien, mais pas si je tente d'activer le thickbox via le bouton d'entrée. Ceci est en FF. Pour Chrome, il semble fonctionner chaque fois. Tous les conseils?

Answer 1

Essayez d'éviter inline vos appels jQuery comme ça. Mettez une balise de script en haut de la page pour se lier à 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 sur le lien physiquement, alors je ne crois pas que cela soit possible. Une solution serait de mettre à jour l'événement click du bouton pour changer la window.location en Javascript:

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

Edit 2:

Maintenant que je me rends compte que Thickbox est une coutume widget de jQuery UI, j'ai trouvé les instructions :

Instructions:

• Créer un élément de liaison (<a href>)
• Donnez le 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 la #TB_inline ajouter la chaîne de requête suivante à l'ancre:

  ? Hauteur = 300 & width = 300 & inlineId = myOnPageContent

• Modifier les valeurs de la hauteur, la largeur et inlineId dans la requête en conséquence (inlineID est la valeur d'identification de l'élément qui contient le contenu que vous souhaitez afficher dans un ThickBox.

• En option, 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 exigera d'appeler la fonction tb_remove() à l'intérieur du ThickBox. Voir l'exemple contenu modal caché, où vous devez cliquer sur oui ou non pour fermer la ThickBox.

Answer 2

Ce qui a fonctionné pour moi était:

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

Answer 3

J'ai récemment trouvé comment déclencher l'événement 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>

Answer 4

cette approche fonctionne sur Firefox, Chrome et IE. 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) {}

Answer 5

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

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

fonctionne très bien en chrome, firefox, opéra et IE10.you peuvent le télécharger à partir de https://github.com/eduardolundgren/jquery-simulate/blob/master/jquery.simulate.js

Answer 6

Le titre de la question dit: « Comment puis-je simuler un clic d'ancrage dans jQuery? ». Eh bien, vous pouvez utiliser le « déclencheur » ou « méthodes de triggerHandler », comme suit:

<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 réel, mais je l'ai utilisé trigger et al avant, et ils ont travaillé a'ight.

UPDATE triggerHandler ne fait pas réellement ce que l'OP veut. Je pense que 1421968 offre la meilleure réponse à cette question.

Answer 7

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

• sélénium browserbot.js

Recherchez la fonction BrowserBot.prototype.triggerMouseEvent.

Answer 8

Je crois que vous pouvez utiliser:

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

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

Cela facilement déclencher la fonction de clic, sans réellement cliquant dessus.

Answer 9

Avez-vous besoin d'un clic d'ancrage faux? Sur le site thickbox:

  

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

Si tel est acceptable, devrait être aussi facile 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 recommande d'utiliser Firebug et de placer un point d'arrêt dans la méthode onclick de l'élément d'ancrage pour voir si elle est déclenchée uniquement sur le premier clic.

Edit:

D'accord, je devais l'essayer pour moi-même et pour moi à peu près exactement votre code a travaillé dans les deux 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>

Les pop-ups de la fenêtre, peu importe si je clique sur l'entrée ou l'élément d'ancrage. Si le code ci-dessus fonctionne pour vous, je vous suggère votre erreur est ailleurs et que vous essayez d'isoler le problème.

Une autre est peut-être que nous utilisons différentes versions de jquery / thickbox. Je me sers de ce que je suis de la page thickbox -. 1.3.2 jquery et thickbox 3.1

Answer 10

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

Answer 11

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

Answer 12

Si vous n'avez pas besoin d'utiliser JQuery, comme je ne le fais pas. J'ai eu des problèmes avec la fonc croix navigateur de .click(). Donc, j'utilise:

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

Answer 13

En Javascript que 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");

Answer 14

En utilisant le script de Jure Je l'ai fait, facilement « cliquez sur » autant d'éléments que vous le souhaitez.
Je viens utilisé Google Reader 1600+ articles et cela a fonctionné parfaitement (dans Firefox)!

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

Answer 15

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 utilisateur clique automatique, procédez comme suit:

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

Answer 16

Cela ne fonctionne pas sur le navigateur natif Android de 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();

Answer 17

En essayant de simuler un « clic » dans les tests unitaires avec la fileuse jQuery UI Je ne pouvais pas obtenir l'une des réponses précédentes à travailler. En particulier, je tentais de simuler le « spin » de sélection de la flèche vers le bas. Je regardais le tests unitaires spinner jQuery UI et ils utilisez la méthode suivante, qui a fonctionné pour moi:

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