[Resolvido] Fancybox só funciona as vezes - jQuery

[Matias Rezende 50]

Fala galera, tudo certo?

 

Primeiro, já vou avisando. Noob_mode = ON, então, tenham paciência comigo, ok? :P

 

http://testes.matiasrezende.com.br/royale/public/

 

O título é estranho, mas é exatamente o que acontece. Para chegar ao problema:

 

- Clicar em procure seu imóvel

- Enviar a busca (de preferência vazia)

- Vão aparecer 5 imóveis, sendo 3 em uma página e 2 na outra.

- Na primeira linha, tem um link (Clique aqui para refinar sua busca). Ao clicar, abre o fancybox com a busca completa. Enviar o formulário (pode ser vazio)

- Clicar na segunda página (vai abrir via Ajax, com .load())

- Ao clicar para refinar a busca, a página não abre no fancybox, ou seja, não está sendo "pego" o evento do click.

 

Algumas coisas que estão ali são tentativas de corrigir o problema.

 

load.js

$(document).ready(function(){
	$("#content").css({minHeight: '399px'});
	
	// abrindo os links do paginador dos imóveis
	$("#paginator a").live('click', (function(){
		$('#content').load( $(this).attr('href') );
		return false;
	}));
	
        // colocando só aqui fora, o problema acontece quando envia a busca
	// lightbox da busca completa
	$("#buscaCompleta").fancybox({
		ajax : {
		    type : "POST",
		    href : $( '#buscaCompleta' ).attr('href')
		}
	});
	
	// links do topo
	$('#header ul li a').live('click', function( e ){
		e.preventDefault();
		
		$("#content").html( '' );
		$("#content").append( set_loading( 'img/layout/loading_small.gif' ) );
		
		var href = $( this ).attr('href');
		$.ajax({
			url: href,
			success: function( data ){
				var right_html = $( data ).find('#rightContent').html();
				var rightContent = set_rightContent( right_html );
				var src = $( data ).find('#content').find('img').attr('src');
				var img = set_img( src );				

				img.onload = function()
				{
					$("#ico-loading").remove();
					
					$("#content").append( img );
					$("#content img").animate({opacity: '1'}, 1000);
					
					window.setTimeout( function(){				
						$("#content").append( rightContent );
						$("#rightContent").animate({marginLeft: '400px'}, 1400);
					}, 900 );
				};
			}
		});
	});
	
	// envio de formulário
	$("input[type='submit']").live('click', function(){
		var form = $( this ).parents().filter('form');
		$.ajax({
			url: $( form ).attr('action'),
			type: 'POST', 
			data: $( form ).serialize(),
			success: function( data ){
				$("#content").html( data );
				
                                // coloquei aqui dentro também para funcionar na hora que enviar o formulário
				// lightbox da busca completa
				$("#buscaCompleta").fancybox({
					ajax : {
					    type : "POST",
					    href : $( '#buscaCompleta' ).attr('href')
					}
				});
				
				// fechando o lightbox da busca completa
				parent.$.fancybox.close();
				
				// fazendo o link da paginação atualizar
				$("#paginator a").click(function(){
					$('#content').load( $(this).attr('href') );
					return false;
				});
			},
			dataType: 'html'
		});
		return false;
	});
	
	$("#slide").css({
		position: 'relative',
		height: '460px',
		overflow: 'hidden'
	});
	
	$("#slide li").css({
		position: 'absolute',
		top: '0',
		height: '460px',
		left: '0'
	});
	$(".bottomContent").css({top: '-70px'});
	
	troca();
});
var i = 1;

function troca() {
	i++;
	$("#slide li").eq( i-1 ).fadeIn(2000, function(){
		$("#slide li .bottomContent").eq( i-1 ).animate({top: '0'},2000);
	});
	$("#slide li").not( $("#slide li").eq( i-1 ) ).fadeOut(1500 , function(){
		$("#slide li .bottomContent").animate({top: '-70px'},1000, function(){
		});
	});
	
	if( ($("#slide li").length) == i ) i=0;
	
	window.setTimeout( 'troca()', 12000 );
}

function set_img( src ) {
	var img = document.createElement('img');
	
	$( img ).attr({src: src});
	$( img ).css({opacity: '0'});
	
	return img;
}

function set_rightContent( text ) {
	var rightContent = document.createElement('div');
	$( rightContent ).attr({id: 'rightContent'});
	$( rightContent ).css({
			overflow: 'hidden',
			marginLeft: '1080px'
		});
	$( rightContent ).append( text );
	return rightContent;
}

function set_loading( src ) {
	var loading = new Image();
	$( loading ).attr({src: src, id: 'ico-loading'});
	$( loading ).css({
		display: 'block',
		margin: '30px auto 0 auto'
	});
	return loading;
}

Alguém tem alguma ideia de como resolver o problema?

 

Obrigado

 

Carlos Eduardo

[Matias Rezende 50]

Bom galera, consegui resolver com a ajuda do nosso amigo xiita João Batista Neto.

 

O problema era que, ao clicar na paginação, o evento de click do link era perdido no DOM (acho que é isto). Então, para recriar o evento, fiz o seguinte:

 

Coloquei o evento do click em uma função:

/**
 * Função que cria o click para o fancybox da busca completa
 * 
 * @return void()
 */
function setClickBuscaCompleta() {
	$("#buscaCompleta").fancybox({
		ajax : {
		    type : "POST",
		    href : $( '#buscaCompleta' ).attr('href')
		}
	});
}

E no arquivo que exibe a busca dos imóveis, eu chamei a função no final do arquivo. Assim:

 

<script type="text/javascript">
	setClickBuscaCompleta();
</script>

Pronto. Então, quando a função foi chamada, ela recriou no DOM o evento do click, fazendo tudo funcionar perfeitamente.

 

RESOLVIDO

 

Carlos Eduardo