Segundo clique cai no lugar do 1º clique com Jquery

Oi Gente!

Uso as últimas verssões do Jquery, livequery e lightbox-0.5.

O problema é que eu tenho 5 botões numa página, cada um da um loading em uma galeria diferente, e mostra na div abaixo do botão clicado. Só que após o primeiro clique, se bem rápido der um segundo clique em outro botão antes do loading do primeiro terminar, o loading do segundo botão aparece na div do primeiro botão. Como é que eu arrumo isto? OBS: Eu coloquei para sumir os botões até acabar de carregar a div, mas isto não é solução, o usuário fica doido com botão sumindo e aparecendo na tela. Não tem como desabilitar o botão porque ele e uma imagem com um link.


Explicando melhor o funcionamento, O projeto é este abaixo:

Tenho uma página que exibe de 5 em 5 imóveis cadastrados. Cada um destes 5 tem suas respectivas galerias de fotos. "Quando clicado o botão +fotos" eu preciso mostrar as fotos de cada galeria na div embaixo do seu imóvel. Sendo que, para poder abrir a galeria eu preciso enviar o id do imóvel e mais algumas outras variáveis.
Como são muitas variáveis de cada imóvel que precisa para abrir a galeria, eu coloquei em cada um, alguns campos hydem, para guardar estes valores, então criei uma função que verifica o id do botão clidado e então atribui os valores dos campos hydem as variáveis necessárias para o loading da galeria. Funcionou perfeitamente, exeto pelo fato que se a pessoa clicou num botão, e imediatamente clica em outro, a galeria do segundo clique vai aparecer no lugar da galeria do primeiro clique.

O código do script é grande, então a página completa está aqui:
http://www.manoeljunior.com/test/venda_pes_res_exe.php?name=resultado&indicador=tudo&busca=&buscaregistrointerno=&valorminimo=&valormaximo=&nomerua=&imovel_id=21&imovel_categoria=residencial&imovel_tipo=Casa&pagina=3


Então, eu tenho as seguintes dúvidas:

1) SE clico num botão e imediatamente em outro, a galeria do segundo clique vai aparecer no lugar do 1° clique. Como arrumo isto?

2) Quando eu dou o loading, os estilos não aparecem. Entra como texto puro. "Exceto" se eu carregar a nova página completa com todos os cabeçalhos. Como faço para arrumar isto?

3) Ao ir vendo as galerias de fotos, após abrir e fechar algumas galerias, aparece uma menssagem dizendo que "este scritp está retardando a página, e pode causar demora", ou coisa parecida, tanto no IE como Chrome. Afinal o que é isto e como resolver?


Deste já agradeço a ajuda de vocês.

Muito obrigado
Manoel Jr.

Respostas

1- Use sempre elementos independentes se eles precisam ser. Para cada botão faça com que a função crie sua própria DIV. Nada que um jQuery.append não resolva. Não esqueça de ter um id específico para esta DIV e verificar se ela já não exista antes de criá-la evitando assim que se crie um objeto a cada clique. Remova-o qdo nao for mais necessário.

2 - Provavelmente o código está vindo por ajax certo? Se é isso, não esqueça que estilos criados por javascript não serão automaticamente atribuidos, vc precisa executar a função que atribui os estilos novamente.

3 - Isso é um erro comum em progrmação usando métodos assincronos de javascript. Como é assincrono vc pode rodar muitos de uma só vez. Evite o uso desnecessário de funções assincronas e sempre remova objetos não mais usados na página.

Oi Marcos Regis!

Captei o que você falou, mas é justamente nestas coisas que estou com dúvida, já tinha imaginado que era mais ou menos assim, só não sei o que usar exatamente, vou explicando abaixo na ordem que você falou:

1) Todos os botões e divs estão com seus ids únicos. As divs inicialmente já estão criadas, o que faço é carregar a galeria de fotos para dentro delas, mas como eu faria para saber se já carreguei e também para descarregar, quando fosse exibir outra galeria em outra div? Penssei criar uma fila de cliques, para eles irem sendo executados na sua ordem, ou então dar um geito de a cada clique zerar e retirar da memória tudo que já tivesse sido feito, só não sei como.

2) Qual é a função que reatribui os estilos? Eu uso o livequery, por ele recarrega css também? Fiquei na dúvida em como fazer isto no conteúdo que veio do loading do "get".

3) Como removo o que foi feito antes de fazer de novo?

Tem um detalhe, nos dados vindo do loading, eu uso o ligthbox, para exibir as fotos, este funciona legal. O código que criei para saber de onde veio o clique e definir onde vai carregar a galeria é este:
//XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
$(".galeriax").click(function() {

if ($(this).attr("id")=='botao1'){var_imovel_numero=1;var_clicou = 'botao1';}
if ($(this).attr("id")=='botao2'){var_imovel_numero=2;var_clicou = 'botao2';}
if ($(this).attr("id")=='botao3'){var_imovel_numero=3;var_clicou = 'botao3';}
if ($(this).attr("id")=='botao4'){var_imovel_numero=4;var_clicou = 'botao4';}
if ($(this).attr("id")=='botao5'){var_imovel_numero=5;var_clicou = 'botao5';}

var_registrointerno = $("#registrointerno_"+var_imovel_numero).val();
var_id_imovel = $("#id_imovel_"+var_imovel_numero).val();
var_categoria_mesclada = $("#categoria_mesclada_"+var_imovel_numero).val();
var_tipex = $("#tipex_"+var_imovel_numero).val();
carregando= '#carregando_'+var_imovel_numero;
retorno= "#retorno_"+var_imovel_numero;

$(carregando).hide();

galeria_lightbox = "lightbox"+var_imovel_numero;
$('a[@rel*='+galeria_lightbox+']').livequery(function() {$('a[@rel*='+galeria_lightbox+']').lightBox();});

$(".galeriax").hide();$(".galeriav").hide();

// Esconder outras divs
if (retorno != "#retorno_1") {$("#retorno_1").empty().hide();};
if (retorno != "#retorno_2") {$("#retorno_2").empty().hide();};
if (retorno != "#retorno_3") {$("#retorno_3").empty().hide();};
if (retorno != "#retorno_4") {$("#retorno_4").empty().hide();};
if (retorno != "#retorno_5") {$("#retorno_5").empty().hide();};

$(carregando).ajaxStart(function(){
$(carregando).show();
$(retorno).hide();
});
$(carregando).ajaxStop(function(){
$(carregando).hide();
$(retorno).show("slow");
});
$.get("http://www.manoeljunior.com/galeria_new.php",{registrointerno: var_registrointerno, id_imovel: var_id_imovel, categoria_mesclada: var_categoria_mesclada, tipex: var_tipex, n_imovel: var_imovel_numero},
function(data) {$(retorno).empty().html(data); });

$(carregando).ajaxComplete(function(){ $(".galeriax").show(); $(".galeriav").show();$("#linka_"+var_imovel_numero).focus();});
$(carregando).ajaxError(function(){$(retorno).empty().append("<h3 style='color:#F00'>Erro ao abrir as fotos: "+var_categoria_mesclada+" "+var_registrointerno+"</h3><h4 style='color:#F00'>Tente de novo em alguns instantes</h4>"); $(".galeriax").show(); $(".galeriav").show();$("#linka_"+var_imovel_numero).focus();});
return false;
} );
//XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Mas acho que se você ver a página funcionando dá para ter uma noção melhor do que estou falando:
http://www.manoeljunior.com/test/venda_pes_res_exe.php?indicador=tudo&imovel_id=21&pagina=3

Muito obrigado pela sua ajda.

Manoel Jr.

Respostas as perguntas
1 - if(jQuery(id)[0]!=null) // significa que existe o objeto

2 - Não tenho como saber sem ver o código e olhar código dos outros é algo que não costumo fazer por pura preguiça. Mas fica a dica, se nos javascripts existem funções como jQuery(id).css() já que dizer que o estilo está sendo alterado dinamicamente e portanto objetos que precisem ficar com esse estilo precisarão executar estes códigos também. Use o firebug para debugar isso.

3- Para remover algum objeto use jQuery(id).remove(); Para as funções é um pouco mais complicado. O correto é que dentro de cada função assincrona exista uma forma de ela não executar ininterruptamente.