Ocultar div y su contenido al hacer clic en un enlace del div

[Bultack]

Estoy teniendo problemas con el código a la hora de querer ocultar un div al hacer clic en un enlace que tengo en este mismo div.

Para que me entendáis, en la pantalla inicial tengo unas imágenes que cuando el usuario clica en una de ellas se muestra un div con información. Esto lo tengo hecho de esta forma en el javascript (jQuery)

Código:

$('#container div:has(.layer)').click( function(layout) {
	$(this).find('.layout').fadeIn('fast');
}); //fin mostrar

Esto me funciona bien y me muestra el div correspondiente. En este div que se muestra al usuario, hay un enlace que no lleva a ninguna parte y lo único que hace es cerrar ese div pero como tengo problemas con el código pues lo que hace es ocultarlo y mostrarlo nuevamente. Este es el código que tengo puesto

Código:

$('#back').click( function(layout) {
	$('.layout').fadeOut('fast');
});

Y este es el código HTML para que veáis como es la estructura, solo dejo la de una sola imagen ya que el resto funciona igual.

Código HTML:

<!-- Enlace a empresa -->
	<div id="image-empresa">
		<img src="empresa_0.png" alt="empresa" />
		<!-- Capa para imagen -->
		<div id="layer-empresa" class="layer">
			<a href="#"><img src="empresa_1.png" alt="empresa" /></a>
		</div>
		<!-- Fin -->
				
		<!-- Capa para el contenido -->
		<div id="layout-empresa" class="layout">
			<img src="telma-content.png" alt="telma" class="telma-content" />
			<img src="empresa-content.png" alt="empresa" class="empresa-content" />
			<div class="block">				
				<h3>Estamos a su servicio desde 1989</h3>
				<p>Empresa homologada por la dirección general de telecomunicaciones nº registro 1307 y por la conselleria de industria con el dqe nº30299</p>
			</div>
			<div id="back">
				<a href="#">Atrás</a>
			</div>							
		</div>
		<!-- Fin capa contenido -->
	</div>
<!-- Fin empresa --> 

[David]

Prueba así:

Código Javascript:

$('#back').click( function(e) {
    $('.layout').fadeOut('fast');
    e.stopPropagation();
});
 

[Bultack]

Muchas gracias por la ayuda, funciona perfecto. Pero ahora una cosa que me gustaría saber, por qué me daba ese problema?

[David]

Porque el evento click se propagaba hacia el div que mostraba el .layout

Así que inmediatamente de que empezara el fadeOut() se ejecutaba de nuevo el fadeIn() por el listener del evento click asociado al div padre.

Al ejecutar stopPropagation() se detiene la propagación del evento, así puedes obtener el resultado esperado.

[Bultack]

Muchas gracias por la aclaración!