addClass(): ajout de classe ne fonctionne pas

Version imprimable

Bonjour à tous,

mon problème est simple, je cherche à ajouter une classe 'active' sur un élément de type <li>; j'y arrive lorsque je ne charge aucun contenu AJAX ou synchrone.
Par contre, dès que je charge du contenu, la classe s'ajoute et disparait tout de suite, est ce qu'une bonne âme aurait une idée :) Voici mon code:

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
 
   var events = {
        init: function(){
            var element = $('nav ul li a');
            element.on('click', function(e){
 
                var link = $(this);
 
                e.preventDefault();
                events.load(link);
 
                if($(this).data('menu') == $(this).html().toLowerCase()){
 
                    $(this).parent().siblings().removeClass('active');
                    $(this).parent('li').addClass('active');
                }
 
            });
        },
        load : function(variable){
            $('body').load(variable[0].href);
        }
}
events.init();

Merci d'avance pour le coup de main ;)

29/10/2014, 08h17
SpaceFrog

je ne vois pas de souci ...

http://jsfiddle.net/xg3acqo2/
29/10/2014, 09h10
t3__rrY

Merci pour ta réponse SpaceFrog, je ne vois pas le soucis non plus; par contre je bosse sur CakePHP avec Foundation. J'ai tenté avec une barre de navigation "maison" mais j'ai toujours le même comportement, si je ne charge aucun contenu ça fonctionne sinon la classe est ajoutée et la page se recharge et la classe disparait...
29/10/2014, 13h02
SpaceFrog

Citation:

si je ne charge aucun contenu ça fonctionne

tu parles d'éléments ajoutés dynamiquement APRES le ready ?
29/10/2014, 14h53
t3__rrY

Non je parlais de ma requête AJAX, si l'attribut href du lien est à "#" ou que je fais

Code:

e.preventDefault();

j'ai bien le comportement désiré
En fait lorsque je clique, la classe est ajoutée ensuite le contenu est chargé et la classe disparaît comme si l'élément du DOM ciblé n'était plus le même.
J'ai également cherché côté de "live()" qui est déprécié mais pas moyen de me débloquer avec la méthode "on()" non plus. J'ai quand même tenté avec ma navigation en dur mais le comportement est identique, c'est moche...:aie:
29/10/2014, 15h10
SpaceFrog
avec on() par délégation à partir du parent
Code:

1 2 obj.parent().on('click',obj, function(){ //ici ton addClass })

Merci mais j'ai déjà tenté en ciblant le parent et en mettant comme ceci et ça ne prend toujours pas:

Code:

1
2
3
4
5
6
7
 
$('ul li').on('click','a', function(e){
                e.preventDefault();
                var link = $(this).attr('href');
                $(this).parent().addClass('active');
//Puis je charge
            });

29/10/2014, 15h48
NoSmoking

Bonjour,

Citation:

En fait lorsque je clique, la classe est ajoutée ensuite le contenu est chargé et la classe disparaît comme si l'élément du DOM ciblé n'était plus le même.

peut être parce que...

Citation:

$('body').load(variable[0].href);
29/10/2014, 15h48
Bovino

Ben c'est peut-être parce que l'élément parent n'est lui-même pas le bon à cibler, s'il est inclus dans le rafraichissement par exemple.
En gros, il faut poser l'événement sur un élément qui existe lorsque tu déclares le gestionnaire.
29/10/2014, 16h45
t3__rrY

Ok je vais ça, merci à tous pour le coup de main ;)
30/10/2014, 08h13
SpaceFrog

Oui certes, il faut bien entendu que l’ancêtre sélectionné qui va déléguer le on() soit fixe ...
31/10/2014, 12h51
danielhagnoul

:fleche: Différences entre on() avec 1 ou 2 sélecteurs