Discussion :

[tete-jaune]

Bonjour,
En plein développement d'un site je bloque sur une fonctionnalité et je fait appel à vous pour m'aider.

Contexte :
J'ai un menu dans le header.
Dans ce menu j'ai une rubrique avec des sous-rubriques :
(nb : je fais de l'url rewriting c'est pour ca qu'il n'y a pas les .php)

Compétition (lien href : competition)
|__ Encadrement (lien href : competition#encadrement)
|__ Equipe 1 (lien href : competition#equipe1)
|__ Equipe 2 (lien href : competition#equipe2)
|__ Palmares (lien href : competition#palmares)
|__ Tournoi (lien href : competition#tournoi)

Tous ces liens renvoient donc sur une seule et même page : competition
Avec des ancres pour chacune des différentes sous-rubriques.

Dans cette page competition, j'ai, sur la gauche, un rappel des sous-rubriques :

Encadrement (lien href : #encadrement)
Equipe 1 (lien href : #equipe1)
Equipe 2 (lien href : #equipe2)
Palmares (lien href : #palmares)
Tournoi (lien href : #tournoi)

Quand je clique sur un de ces liens dans ce rappel j'ai un code javascript qui s’exécute :

Code :

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

1
2
3
4
5
6
7
8
 
$('a[href^="#"]').click(function(){ 
var id = $(this).attr("href");
alert(id);
.......
.......
return false; 
});

Ce code s'exécute parfaitement car il identifie bien les liens qui commence par un #

Problématique :
J'aurai souhaité que ce code s'exécute également quand il y a un clic sur un des liens du menu du header qui, eux, ne commence pas par # mais par competition. Le # ne venant qu'ensuite.

Avez vous une idée?
J'ai essayé de modifié comme ceci mais sans résultat :

Code :

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

1
2
3
 
$('a[href^="competition#"]').click(function(){
$('a[href*="#"]').click(function(){

Question subsidiaire :
Je n'ai mis que l'exemple de la page "competition" mais je vais avoir 3 pages qui seront dans ce style :
• leclub
• entrepart
J'ai essayé un truc du style :

Code :

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

1
2
 
$('a[href^="(leclub|competition|entrepart)?#"]').click(function(){

Merci d'avance pour votre aide.
tete-jaune

[danielhagnoul]

Bonjour

Code HTML :

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

1
2
3
4
5
6
<header class="liens">
	<a href="#equipe1">Équipe 1</a>
	<a href="competition#palmares">Palmares</a>
	<a href="leclub#tournoi">Tournoi</a>
	<a href="entrepart#encadrement">Encadrement</a>
</header>

Code JavaScript :

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

1
2
3
4
5
$( "header.liens" ).on( "click", "a[href^='#'], a[href^='competition'], a[href^='leclub'], a[href^='entrepart']", function( event ){
	console.log ( "event.target = ", event.target );
 
	return false; // empêche l'action par défaut pour voir le résultat de console.log
});

[tete-jaune]

Bonjour danielhagnoul et merci pour votre réponse.

Voici le code pour le menu se trouvant dans le header :

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
 
<ul class="nav navbar-nav pull-right">
	[...]
	<li class="primary">
		<a href="competition" class="firstLevel hasSubMenu">Compétition</a>
		<ul class="subMenu">
			<li><a href="competition#encadrement">Encadrement sportif</a></li>
			<li><a href="competition#homme">Equipes Homme</a></li>
			<li><a href="competition#femme">Equipes Femme</a></li>
			<li><a href="competition#jeunes">Equipes Jeunes</a></li>
			<li><a href="competition#palmares">Palmarès</a></li>
			<li><a href="competition#tournoi">Tournoi</a></li>
		</ul>
	</li>
	[...]
</ul>

Et voici le code de mon rappel de menu dans la page elle même :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<aside id="sidebar" class="col-md-3">
	<nav id="subnav">
		<ul>
			<li><a href="#encadrement">Encadrement sportif<i class=" icon-right-open"></i></a></li>
			<li><a href="#homme">Equipes Homme<i class=" icon-right-open"></i></a></li>
			<li><a href="#femme">Equipes Femme<i class=" icon-right-open"></i></a></li>
			<li><a href="#jeunes">Equipes Jeunes<i class=" icon-right-open"></i></a></li>
			<li><a href="#palmares">Palmarès<i class=" icon-right-open"></i></a></li>
			<li><a href="#tournoi">Tournoi<i class=" icon-right-open"></i></a></li>
		</ul>
	</nav>
</aside>

Du coup je n'arrive pas bien à voir comment appliquer la fonction que vous m'avez proposée.
En attendant un retour je vais malgré tout essayer de me dépatouiller avec.

[danielhagnoul]

Bonsoir

Si ce n'est pas du code dynamique, alors :

Code :

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

1
2
3
4
5
$( "a[href^='#'], a[href^='competition'], a[href^='leclub'], a[href^='entrepart']" ).on( "click", function( event ){
	console.log ( "event.target = ", event.target );
 
	return false; // empêche l'action par défaut pour voir le résultat de console.log
});

Si c'est du code dynamique, il faut se rattacher au premier parent non dynamique, à la limite à "body" (plus le parent non dynamique est loin dans la hiérarchie du DOM, moins c'est rapide) :

Code :

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

1
2
3
4
5
$( "body" ).on( "click", "a[href^='#'], a[href^='competition'], a[href^='leclub'], a[href^='entrepart']", function( event ){
	console.log ( "event.target = ", event.target );
 
	return false; // empêche l'action par défaut pour voir le résultat de console.log
});

Mais même si le code n'est pas dynamique, je préconise d'utiliser cette manière de faire, sinon tous les tags "a" de la page ayant un "href" correspondant à notre sélecteur seront concernés.

[SpaceFrog]

Daniel ..

Code :

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

return false; // empêche l'action par défaut pour voir le résultat de console.log

juste en mode debug de développement alors ...
car la console retourne un message pour dire que le return false est deprecated et qu'il faut désormais utiliser preventDefault()

[tete-jaune]

Bonjour,
Merci à tous les deux.
J'ai réussi à m'en dépatouiller. Merci beaucoup.

[danielhagnoul]

Daniel ..

Code :

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

return false; // empêche l'action par défaut pour voir le résultat de console.log

juste en mode debug de développement alors ...
car la console retourne un message pour dire que le return false est deprecated et qu'il faut désormais utiliser preventDefault()

Bonjour

Ce n'est pas une erreur de l'employer, c'est un raccourci utile, qui vaut un event.preventDefault() plus un event.stopPropagation().

C'est un bogue dans jquery-1.10.2.js à la ligne 5374 (ce bogue n'existe pas dans 2.0.3 ni dans les versions 1.11.0-beta2 et 2.1.0-beta2).

event.returnValue is deprecated.
Please use the standard event.preventDefault() instead.

C'est event.returnValue qui est obsolète !

[burndev]

Bonjour

Ce n'est pas une erreur de l'employer, c'est un raccourci utile, qui vaut un event.preventDefault() plus un event.stopPropagation().

bonjour,

Certe, mais il n'y a aucun rapport entre preventDefault() et stopPropagation()

Le premier annule les événements par défaut de l'élément du dom pour l'action en cours
Le deuxième stop la remonter ou la descente de l'événement de l'élément du dom au moment de l'action.
Et un simple console.log(event.id) fera l'affaire