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

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

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:

Après avoir cliquer sur le lien

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

Un error ? ...

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

+0 -0
Staff

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.

+1 -0
Auteur du sujet

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, .. ?

+0 -0
Staff

Cette réponse a aidé l'auteur du sujet

ç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.

artragis

jQuery est assez intelligent pour boucler sur les éléments pour leur affecter le listener individuellement, le résultat est le même.


Ton problème est beaucoup plus simple que ça : tu écoutes le click sur les éléments .sub. Ton lien a bien cette class, mais le li parent aussi, l'écouteur est donc appelé deux fois. Donc :

  • soit tu fais en sorte de gérer tes class autrement
  • soit tu filtres mieux tes cibles avec a.sub à la place de ton sélecteur actuel
  • soit tu empêches l'événement de remonter avec e.stopPropagation()

Au passage, plutôt que faire $('.sub li a') qui demandera pas mal de ressources sur certains navigateurs, tu peux décomposer le travail avec $('.sub').find('li').find('a'). Sachant que dans tous les cas ça fera énormément de traitements pour pas grand chose : autant utiliser un sélecteur unique qui soit bon directement.

Édité par viki53

Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte