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

Version imprimable

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

Code:

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 ?

Bonsoir.

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

Code:

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

Pas mieux

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:

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 :mrgreen:

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

De quel coté du clavier situer le problème ?

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:

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 :aie:

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

Pour contourner...

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

Code:

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

Avec, pour "afterLast" :

Code:

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 :calim2:

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 :calim2: 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:

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 ?

12/03/2010, 09h55
Isidore.76

adresse absolue / relative

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 ! :)