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

  • Tempo de leitura: 2 min.

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:

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

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.

Felipe Elia

Associate Director of Platform Engineering na 10up, WordPress Core Contributor, Global Polyglots Mentor na comunidade internacional do WordPress e Locale Manager na comunidade WordPress Brasil.

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!

Comentários encerrados.