Appel jquery sur une balise à classe variable

Bonjour,

Lorsque $(".cacher").on("click") est sollicité, tout va bien.

Mon problème est lorsque je cherche à solliciter $(".afficher").on("click") car malgré que la classe soit bien changée (test avec alert) ce sera toujours $(".cacher").on("click") qui sera sollicité

Je passe par une balise hidden pour éviter les problèmes d'interprétation serveur en twig sous Symfony 2

Le html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div class="cacher" id="controleBanniere">
	<img src="{{ asset('/mon-site/images/chevronFermeture.png') }}" alt="réduire la bannière vidéo">
</div>
 
<div id="hidden">
        <div id="imageOuverture">
		<img src="{{ asset('/mon-site/images/chevronOuverture.png')}}" alt="Afficher la bannière vidéo">
	</div>
	<div id="imageFermeture">
		<img src="{{ asset('/mon-site/images/chevronFermeture.png')}}" alt="Cacher la bannière vidéo">
	</div>
</div>

Le JQuery:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
$(".afficher").on("click", function()
{
	$("#banniereVideo").css("display", "block");
	$(this).removeClass("afficher");
	$(this).addClass("cacher");
	$(this).html("");
	$(this).html($("#imageFermeture").html());
});
 
$(".cacher").on("click", function()
{
	$("#banniereVideo").css("display", "none");
	$(this).removeClass("cacher");
	$(this).addClass("afficher");
	$(this).html("");
	$(this).html($("#imageOuverture").html());
});

Merci de votre aide