Simuler évenement click

Version imprimable

07/09/2013, 02h09
sisiniya

Simuler évenement click
Bonjour,

Je souhaite déclencher un événement click (sur le lien ayant 'link' comme id) lorsqu'on clique sur la checkbox:

Code HTML:
Code:

1 2 <input type="checkbox" name="choix" id="case"> <a href="www.google.com" id="link"> choix </a>
J'ai essayé en utilisant bind/trigger, mais aucun effet ne s'est produit quand je clique sur la checkbox !

Code JS:
Code:

1 2 3 $("#case").bind("click", function(){ $("#link").trigger('click'); });
Pourriez-vous m'aiguiller vers la bonne solution ?

Par avance, Merci

Sisiniya.

Bonjour

Ne pas utiliser "link" qui est un mot réservé du langage HTML. Idem pour "case" mot réservé de JS.

Code:

1
2
<input type="checkbox" name="choix" id="cas">
<a href="www.google.com" id="lien"> choix </a>

Code:

1
2
3
4
5
6
7
8
$( "#lien" ).on( "click", function(){
    alert( "J'avais oublié le principal, définir une action sur l'événement click" );
    // return false; // pour stopper l'action par défaut
});
 
$( "#cas" ).on( "click", function(){
    $( "#lien" ).trigger( "click" );
});

07/09/2013, 17h51
sisiniya

Bonjour Daniel,

Merci beaucoup pour votre réponse.

Au fait, quand je clique sur la case à cocher, l'alerte associée au lien s'affiche très bien mais mon problème c'est que la redirection vers www.google.com, autrement, l'effet href d'un lien ne se déclenche pas !!

Avez-vous une idée s'il vous plaît ?

Sisiniya.
07/09/2013, 22h46
danielhagnoul

L'attribut "href" a besoin d'une URL complète : <a href="http://www.google.com" id="lien"> choix </a>.
08/09/2013, 01h26
sisiniya

Avec ceci, j'arrive bien à déclencher l'événement click (affichage d'alerte) sur le lien mais aucun effet sur href !

Pour s'assurer que le href est juste, quand je clique sur le lien (<a>), il me redirige bien vers l'URL.

Est ce que la simulation d'un événement sur un lien ne permet pas de déclencher l'effet de son attribut href ?

Par avance, Merci.

Sisiniya.
08/09/2013, 09h57
danielhagnoul

:calim2:

Je n'y comprends plus rien, si vous nous montriez vos codes (CSS, HTML, JS) afin que l'on puisse tester le problème, plutôt que de nous dire "cela ne fonctionne pas" ce qui ne nous aide pas du tout à comprendre le problème.

Bonjour Daniel,

Désolé si je n'étais pas claire...

Code HTML:
Code:

1 2 <input type="checkbox" name="choix" id="cas"> <a href="http://www.google.com" id="lien"> choix </a>
Code JavaScript:
Code:

1 2 3 4 5 6 7 8 $("#lien").click(function(){ alert('Appel au lien = ' + $("#lien").attr('href')); }); $("#cas").click(function(){ $("#lien").trigger("click"); alert('Afficher Lien = ' + $("#lien").attr('href')); });
1. Quand je clique sur le lien (choix), l'alerte (Appel au lien...) s'affiche + redirection vers site google.com.

2. Quand je clique sur la case (cas), l'alerte (Appel au lien...) et (Afficher Lien...) s'affichent mais aucune redirection vers le site google.com !! C'était ça mon soucis.

Dans tous les cas la valeur de $("#lien").attr('href') est toujours http://www.google.com

Espérant que j'étais plus précise qu'avant.

PS: j'ai testé sur les browsers: Chrome, Firefox, IE

Merci pour votre aide Daniel.

Sisiniya.

Bonjour,
pourquoi ne pas faire directement un
Code:

1 2 3 $("#cas").on('click', function(){ window.location = $("#lien").attr('href'); });

08/09/2013, 17h21
sisiniya

Merci NoSmoking pour votre réponse.

En effet, ce que vous avez proposez permet la redirection vers url de l'attribut href.

Par contre, j'ai besoin que cela marche aussi avec la simulation du click en utilisant les triggers.

Pourquoi compliquer la vie avec cette simulation ?!!
En réalité mon href contient une action (showFile.do) vers un contrôleur.
Mon objectif d'origine: quand je clique sur le lien ou la case à cocher, il faut afficher une fenêtre proposant l'ouverture ou l'enregistrement du fichier. (cf. mon poste sur le site ayant comme titre 'Dialogue Open/Save File')

Ce contrôleur renvoie la réponse (HttpServletReponse) alimentée par les bonnes données (header, contentType, fichier à afficher...) permettant d'afficher cette fenêtre qui propose l'ouverture/enregistrement du fichier.

Si j'utilise window.location, le fichier sera ouvert dans une fenêtre et ce n'est pas mon objectif. D'où, l'idée de simuler le click.

Pourriez-vous me dire si j'ai loupé un truc dans mon code ?

Sisiniya.

Bonsoir

J'étais persuadé que l'action par défaut d'un élément du DOM était activée par un trigger( "click" ), mais on dirait bien que ce n'est plus toujours le cas depuis longtemps pour des raisons de sécurité (?).

La méthode trigger() souffre aussi de bogues récurrents depuis longtemps.

Il y a beaucoup de littérature sur le sujet aussi bien dans les tickets jQuery (rapport de bogues) que sur les forums anglophones, la meilleure explication que j'aie vue est : http://stackoverflow.com/questions/1...694803#1694803
Code:

1 2 3 4 5 6 7 8 9 10 11 // ne fonctionne pas //$( "#lienID" ).trigger( "click" ); // fonctionne window.location.href = $( "#lienID" ).prop( "href" ); // fonctionne ! $( "#lienID" )[ 0 ].click(); // fonctionne !!! $( "#lienID" )[ 0 ].trigger( "click" );