Mauvaise façon de procéder ou boque IE7 ? JQuery ?

**Isidore.76** · 03/03/2010, 17h42

Soit le HTML suivant qui reproduit une situation rencontrée dans l'une de mes pages :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>
            Hum Hum
        </title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(
 
                function() {
                    // Ajout contenu par exemple via ajax, "en dur" ici...
                    $("#a_ajout").click( function() { 
                        $("#div_test").html( "<a id='a_1' href='456'>Ancre 1</a><a id='a_2' href='123456'>Ancre 2</a>");
                        return false;
                    });
 
                    $("#a_test").click( function() {
                        alert( "Egal = " + $("a[href=456]").length );
                        alert( "Fini par = " + $("a[href$=456]").length );
                        return false;
                    });
 
                });
        </script>
    </head>
    <body>
        <a id="a_ajout" href="#">Click pour ajout</a>
        <a id="a_test" href="#">Click pour test IE7</a>
        <div id="div_test">
        </div>
    </body>
</html>

Si vous cliquez sur le lien "ajout" puis "test", vous pourriez vous attendre à l'affichage "egal = 1" puis "Fini par = 2". C'est vrai pour tous les navigateurs que j'ai testé (Chrome,Opéra, FireFox, IE8) sauf IE7 !? Pas essayé IE6. Précision : JQuery en version 1.3.2

Ah, oui, sous IE7, l'affichage est "Egal = 0" et "Fini par = 2"

Pourquoi "Egal = 0" pour IE7 !?
Auriez-vous une explication ?

**danielhagnoul** · 03/03/2010, 21h33

Bonsoir.

Vous cherchez un texte '456' pas un nombre 456 !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$("#a_test").click( function() {
	alert("Egal = " + $("a[href='456']").length + "\nFini par = " + $("a[href$='456']").length );
 
	return false;
});

**Isidore.76** · 04/03/2010, 14h25

Merci pour votre réponse !

Hélas, cela ne fonctionne pas

Avez-vous tester avec IE7 ? Cela vient peut-être de "mon" IE7 ? Cela m'étonnerait fort, mais...?

J'ai donc testé avec ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>
            IE7
        </title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(
 
                function() {
                    // Ajout contenu par exemple via ajax...
                    $("#a_ajout").click( function() { 
                        $("#div_test").html( "<a id='a_1' href='456'>Ancre 1</a><a id='a_2' href='123456'>Ancre 2</a>");
                        return false;
                    });
 
                    $("#a_test").click( function() {
                        alert("Egal = " + $("a[href='456']").length + "\nFini par = " + $("a[href$='456']").length );
                        return false;
                    });
 
                });
        </script>
        <style type="text/css">
            a {display: block; margin: 10px 0; }
            #div_test{ width:300px; height:300px; background-color:Yellow; }
        </style>
    </head>
    <body>
        <a id="a_ajout" href="#">Click pour ajouter deux ancres dans div jaune</a>
        <a id="a_test" href="#">Click pour tester href des deux ancres ajoutées</a>
        <div id="div_test">
        </div>
    </body>
</html>

Et donc, IE7 est toujours récalcitrant...

Encore merci pour votre aide, et si une autre idée vous vient... n'hésitez-pas

Je viens de tester avec la version 1.4.2 de JQuery : pas mieux

**Isidore.76** · 04/03/2010, 14h46

La page ci-dessous permet de comparer le résultat obtenu à partir d'un contenu "statique" (présent dès le chargement de la page) et à partir d'un contenu dynamique.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>
            IE7
        </title>
        <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
        <script type="text/javascript">
            $(document).ready(
 
                function() {
                    // Ajout contenu (via ajax par exemple) en dur ici...
                    $("#a_ajout").click( function() { 
                        $("#div_contenu_dynamique").html( "<a id='a_1' href='456'>Ancre 1</a><a id='a_2' href='123456'>Ancre 2</a>");
                        return false;
                    });
 
                    $("#a_test_statique").click( function() {
                        alert("DEF\nEgal = " + $("a[href='def']").length + "\nFini par = " + $("a[href$='def']").length );
                        return false;
                    });
 
                    $("#a_test_dynamique").click( function() {
                        alert("456\nEgal = " + $("a[href='456']").length + "\nFini par = " + $("a[href$='456']").length );
                        return false;
                    });
 
                });
        </script>
        <style type="text/css">
            a {display: block; margin: 10px 0; }
            div { margin: 20px 0; }
            #div_contenu_statique{ width:300px; height:100px; background-color:Silver; }
            #div_contenu_dynamique{ width:300px; height:100px; background-color:Yellow; }
        </style>
    </head>
    <body>
        <a id="a_test_statique" href="#">Click pour tester href ancres statiques</a>
        <div id="div_contenu_statique">
            <a href="def">Ancre DEF</a>
            <a href="abcdef">Ancre ABCDEF</a>
        </div>
        <a id="a_ajout" href="#">Click pour ajouter deux ancres dans div jaune</a>
        <a id="a_test_dynamique" href="#">Click pour tester href ancre ajoutées dynamiquement</a>
        <div id="div_contenu_dynamique">
        </div>
    </body>
</html>

IE7 ne pose pas de problème pour le contenu "statique", par contre, s'agissant des ancres ajoutées dynamiquement, c'est toujours faux

Je sèche, si quelqu'un(e) a une idée...?

**Isidore.76** · 04/03/2010, 15h16

Pour info, ceci fonctionne, mais n'est pas satisfaisant...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
alert("456\nEgal = " + $("a").filter( function() { return "456" == this.href.afterLast('/'); } ).length + "\nFini par = " + $("[href$='456']").length );

Avec, pour "afterLast" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
// Retourne la portion de chaine qui suit la chaine ou le caractère passé en argument
String.prototype.afterLast = function( car )
{
    var index = this.lastIndexOf( car );
    return index ? this.substring( 1 + index ) : this;
}

Des idées ?
S'il vous plait, dîtes moi que vous avez des idées

**Isidore.76** · 04/03/2010, 16h28

Ci-dessous une page enrichie qui permet de constater que cela marche sans problème avec les balises span ! Idem pour les ancres si on s'intéresse à l'id, mais que ça ne fonctionne toujours pas pour les ancres avec IE7 et si on teste sur le href

Il y a donc quelque chose de particulier avec le href !?

En creusant un peu, il semble donc, sous IE version 7, que le href de l'ancre se voit préfixé "automatiquement" par l'URL du site, de la page, bref par quelque chose comme, par exemple, "http://localhost.../".

Cela sous IE7, donc, mais pas sous IE8. Ni Opera. Ni Chrome. Ni Firefox...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>
            IE7
        </title>
        <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
        <script type="text/javascript">
 
            $(document).ready(
 
                function() {
                    // Add dynamic content to #div_dynamique
                    $("#a_ajout").click( function() { 
                        $("#div_dynamique").html('<a id="a_456" href="456">Ancre 1</a><a id="a-132456" href="123456">Ancre 2</a>');
                        $("#div_dynamique").append( "<span id='erty'>ERTY</span><span id='azerty'>AZERTY</span><span id='qwerty'>QWERTY</span>" );
                        return false;
                    });
 
                    $("#a_test_statique").click( function() {
                        alert("DEF\nEgal = " + $("a[href='def']").length + "\nFini par = " + $("a[href$='def']").length );
                        return false;
                    });
 
                    $("#a_test_dynamique").click( function() {
                        alert("456 (HREF)\nEgal = " + $("a[href='456']").length + "\nFini par = " + $("a[href$='456']").length );
                        alert("/456 (HREF)\nFini par = " + $("a[href$='/456']").length );
                        alert("456 (ID)\nEgal = " + $("a[id='a_456']").length + "\nFini par = " + $("a[id$='456']").length );
                        alert("ERTY\nEgal = " + $("span[id='erty']").length + "\nFini par = " + $("span[id$='erty']").length );
                        return false;
                    });
 
                });
        </script>
        <style type="text/css">
            a, span {display: block; margin: 10px 0; }
            div { margin: 20px 0; }
            #div_static_content{ width:300px; height:100px; background-color:Silver; }
            #div_dynamique{ width:300px; height:160px; background-color:Yellow; }
        </style>
    </head>
    <body>
        <a id="a_test_statique" href="#">Click pour tester href ancres "statiques"</a>
        <div id="div_static_content">
            <a href="def">Ancre DEF</a>
            <a href="abcdef">Ancre ABCDEF</a>
        </div>
        <a id="a_ajout" href="#">Click pour ajouter du contenu au div dynamique (jaune)</a>
        <a id="a_test_dynamique" href="#">Click pour tester la recherche dans le div au contenu dynamique</a>
        <div id="div_dynamique">
        </div>
    </body>
</html>

Je ne considère pas encore ce "problème" comme "résolu", au cas ou un(e) lecteur/lectrice souhaiterait apporter un commentaire ?

**Isidore.76** · 12/03/2010, 09h55

Discussion close.

Notons simplement que certains navigateurs (au moins IE7) transforment l'adresse relative en adresse absolue. A prendre en compte dans nos développements !

J'ajoute le "tag" Résolu !

Mauvaise façon de procéder ou boque IE7 ? JQuery ?

jQuery

Vue hybride

Discussions similaires

Partager

Partager