Evento .click() do jQuery não funciona em conteúdo do Fancybox

  • Last modified: 5 de agosto de 2024
  • Reading time: 18 mins

Usando a versão 1.2 do fancybox enfrentei um problema, aparentemente sem razão: associava um .click() por jQuery a um link e ele não tinha o comportamento esperado.

Depois de muito tentar (acho que) percebi o que acontecia. Ao usar conteúdo inline no fancybox, ele copia os elementos para formar a janela que se espera. Associando normalmente um comportamento a qualquer elemento, você associa ao original, a cópia não herda. Ou seja, no meu caso o link que era exibido não tinha mais associado o comportamento que eu queria.

A solução é associar na hora em que a janela é aberta, pela chave ‘callbackOnShow’ (na versão 1.2). No meu caso ficou assim:

JavaScript
$(document).ready(function () {
	(...)
	$("#page-index-call").fancybox({
		width				: 	'1000px',
		padding				:	0,
		overlayOpacity		:	1,
		overlayColor		:	'#000',
		hideOnOverlayClick	:	false,
		hideOnContentClick	:	false,
		enableEscapeButton     :	false,
		showCloseButton		:	false,
		<strong>callbackOnShow		: 	function () {
			$("#fancy_content .box_close").click(function(e) {
				e.preventDefault();
				e.stopPropagation();
				$("#wrapper").show();
				$.fn.fancybox.close();
			});			
		}</strong>
	});
	(...)
});

Não sei se na versão 1.3 (atual) já consertaram, mas se continuar, talvez seja preciso alterar a chave, uma vez que a API foi atualizada.

Este post tem um comentário

  1. yure carvalho

    Eu não estou conseguindo validar um formulário com jquery que foi carragado pelo fancybox através de um iframe.
    me ajudem!

Os comentários estão encerrados.