Je ne comprend pas trop ce qu'il se passe la ?

Bonjour,

je viens aujourd'hui vous demander votre aide car je ne comprend vraiment pas ce qu'il m'arrive. J'ai donc un menu, quand on clique sur un certain lien, je veux afficher autre chose dans mon article.

Code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

$(".sub").click(function (e){
        e.preventDefault();
        $("#content").empty();

        if($(this).hasClass("raccourcis")){
            $("#content").load("../ressources/load.html #raccourcis");
        }else if($(this).hasClass("noteadd")){
            //$("#content").load("../ressources/load.html #noteadd");
            alert($(this).attr('class') + " " + $(this).hasClass("noteadd"));
        }else if($(this).hasClass("notemanage")){
            $("#content").load("../ressources/load.html #accueil");
        }else if($(this).hasClass("accueil")){
            $("#content").load("../ressources/load.html #accueil");
        }else{
            //$("#content").load("../ressources/load.html #error");
            alert("Error");
        }
    });

J'ai un bouton qui contient ceci <a href="" class="noteadd subback sub">Ajouter une note</a> Quand je clique dessus, j'obtiens ce résultat:

Mais la ! Aussi étonnant qu'il soit, quand je clique sur OK j'obtient ceci:

J'ai donc le else if qui s'active et une fois éxécuté c'est le else qui s'actionne … IMPOSSIBLE non ?

Mais par contre, pour les liens raccourcis ou accueil ça fonctionne parfaitement, voici donc le code de mes liens:

 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

<nav id="nav-vertical">
            <ul id="nav-vertical-ul">
                <li class="sub accueil">
                    <a href="">Accueil</a>
                </li>
                <li class="sub">
                    <p>Notes</p>
                    <ul>
                        <li class="nav-vertical-sub">
                            <a href="" class="subback sub noteadd">Ajouter une note</a>
                            <a href="" class="subback sub notemanage">Gérer les notes</a>
                        </li>
                    </ul>
                </li>
                <li><a href="">Catégorie</a></li>
                <li class="sub">
                    <a href="">Check-liste</a>
                    <ul>
                        <li>
                            <a href="">Créer une check-liste</a>
                            <a href="">Gérer les check-liste</a>
                        </li>
                    </ul>
                </li>
                <li><a href="/bugtracker">Bugtracker</a></li>
                <li><a href="" class="sub raccourcis">Raccourcis</a></li>
            </ul>
        </nav>

Voilà, en espérant que vous puissiez m'aider car je ne comprend vraiment pas ce résultat. WinXaito

J'ai tendance à penser qu'il interprète ton click sur "ok" comme un click sur un élément qui a la classe sub mais aucune autre classe. Il faut utiliser le debugger pas à pas pour vérifier tout ça. J'ai aussi tendance à croire que c'est à cause du bubbling, peut être qu'en le desactivant tu n'auras plus de problème.

Hum je viens de remarquer qu'en mettant ceci: $(".sub li a").click(function (e){ et en supprimant la classe sub ici <a href="" class="noteadd subback">Ajouter une note</a> ça fonctionne. Bon du coup, le bouton Accueil et Raccourcis ne fonctionne plus, je pourrai donc les séparer en deux.

Sinon par curiosité, que penser de comment je m'y suis pris pour arriver à ce que je veux ? Optimisation, cohérence, .. ?

Je suis plutôt du genre à faire un lien = un listener, donc mettre des id sur les liens qui ont besoin d'ajax.

Ok, c'est vrai que ça peut-être plus pratique, mais donc je dois faire une évenement click pour chaque lien ? ça allourdi pas un peu beaucoup ?

ça simplifie le code. Et un listener sur un identifiant aura moins d'effet de bord et le bubbling risque d'être bien moins gourmand. Perso je pense que justement, ça allège les choses.

Ok merci