2012-09-13 11 views
7

Esa es mi pregunta, y aquí está mi código de ejemplo.¿Fancybox mute Click events?

HTML:

<a class="fancybox" rel="group" href="img1.jpg"> <img src="img1_thumb.jpg"> </a> 
<a class="fancybox" rel="group" href="img2.jpg"> <img src="img2_thumb.jpg"> </a> 

JS:

var header = '<img id="w" src="logo.gif">'; 

$('.fancybox').fancybox({ 
    afterLoad: function() { 
     this.wrap.prepend(header); 
    }, // afterLoad 
}); //fancybox 

$('#w').click(function() {console.log('clicked');}); 

Si hace clic en una miniatura para lanzar FancyBox, afterLoad caerá en la cabecera, pero cuando se haga clic en la imagen y ver la consola no obtienes nada

¿Pensamientos? Intento usar el método $.fancybox.close() de FancyBox, pero si no puedo disparar el evento de clic, me veo forzado a usarlo en línea, lo cual prefiero no hacer por no usar JS en línea.

Respuesta

2

Debe usar .on() o su equivalente para vincular dinámicamente o enlazar en la devolución de llamada afterLoad. No tiene nada que ver con Fancybox: estás vinculando usando un selector jQuery que coincide con algo que aún no existe en el DOM. Alternativamente, podría tratar de vincularse directamente al elemento en la memoria, pero debería sentirse cómodo trabajando primero con el enlace DOM.

+0

Entonces, ¿pondré algo así como '$ ('# w'). On ('click', function() {$. Fancybox.close()})' en la función 'afterLoad' después de anteponer el encabezado? –

+0

¡Eso lo hizo! Muchas gracias. –

+0

Acabo de pensar que agregaría que enlazar la función '$ .fancybox.close()' en la devolución de llamada 'afterLoad' no era óptima. Cuando se desplaza a la siguiente imagen, el encabezado 'nuevo' no maneja el evento. Lo arreglé moviendo el manejador de clic a una devolución de llamada 'afterShow'. –