Comment simuler un clic d'ancrage via jquery?

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?

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.

Ce qui a fonctionné pour moi était:

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

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>

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

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

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.

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:

• selenium-browserbot.js

Recherchez la BrowserBot.prototype.triggerMouseEventfonction.

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.

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.

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

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.

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)

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

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

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

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

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