click et IE8

Version imprimable

click et IE8

Bonjour,

Sous IE8 (et inférieur je suppose) l'évènement click fonctionne bizarrement :

code HTML :

Code:

<div class="onglet"><a href="#!lien" onClick="fonctionPerso();" ><img src="images/lien.jpg" alt="Lien" width="100%" /><br/><center>Lien</center></a></div>

code CSS :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .onglet { -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -o-border-bottom-left-radius: 10px; -o-border-bottom-right-radius: 10px; -ms-border-bottom-left-radius: 10px; -ms-border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-width: medium; border-style: none solid solid; border-color: #AAAAAA; }
code JS :
Code:

1 2 3 $("a[href='#!lien']").parent().parent().on("click", {page: "lien"}, function(event) { console.log("ici"); });
En fait ce code fonctionne bien sous IE9 et +.
Sous IE8, le lien ce place uniquement sur le bord de ma div (quelques pixels d'épaisseur)

Si j'enlève les .parent() plus rien ne marche.

A l'aide svp !
Merci beaucoup !

Pour info, j'ai également essayé sans succès le code que j'utilise pour les "vrais" navigateurs comme Firefox ou Chrome :
Code:

1 2 3 $(document).on("click", "a[href='#lien']", {page: 'lien'}, function(event) { console.log("la"); });

28/01/2014, 10h15
Bovino

Code:

onClick="fonctionPerso();"

fonctionPerso(), c'est quoi au juste ? Le problème ne viendrait-il pas plutôt de là ?
Que dit ta console d'erreur ?
28/01/2014, 10h28
Goldocrack

fonctionPerso fonctionne

Merci de te pencher sur mon problème.

Ma console d'erreur n'affiche rien.

"fonctionPerso();" est simplement une gestion de menuSecondaire.
Elle ne gêne pas (testé) et fonctionne parfaitement sur tous les autres navigateurs.

Tu peux même l'enlever (ainsi que le onClick), le comportement reste le même.

Bah... désolé, mais si je teste le code suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jQuery IE8</title>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
	<div style="border: 1px dotted #000000">
		<div class="onglet"><a href="#!lien"><img src="images/lien.jpg" alt="Lien" width="100%" /><br/><center>Lien</center></a></div>
	</div>
	<script>
                $("a[href='#!lien']").parent().parent().on("click", {page: "lien"}, function(event) {
                        console.log("ici");
                });
        </script>
</body>
</html>

j'obtiens bien le message avec IE8...

28/01/2014, 11h08
Goldocrack

Effectivement ce test fonctionne.

J'ai du mal à comprendre pourquoi alors ça ne fonctionne pas sur mon site.

Pour une meilleure visualisation et un test grandeur nature, voici le site qui pose problème :
http://www.joyeuxcabots.fr

Nous pouvons voir sous IE8 que seul les quelques pixels gris autour des images des menus lance l'affichage de la page. Si nous cliquons sur l'image ou sur le lien texte en dessous, il ne se passe rien...
(Précision, il faut tester sur les menus adhérents, contact ou partenaires, les autres menus déclenchent cette fameuse fonctionPerso)