[Resolvido] Países, Estados, Cidades e Bairros com jquery

[ernestovm 0]

Aí galera, beleza?

Seguinte: tenho uma página com 4 DIV ao lado da outra. A primeira contém uma tabela com os países. Ao clicar em um país chama um script PHP que carrega todos os estados do país na div ao lado direiro. A idéia é clicar no estado, carregar suas cidades. clicar na cidade carregar os bairros.

Acontece a página já é carregada com a div de países cheia e a class "pais" exposta na página, funcionando legal. O problema é que quando clico em um dos estados ele não execulta a ação

$(".estado").click(function(){
var ad = $(this).attr("id");
var xd = ad.split("|");
var id = xd[1];
alert(id);
$("#id_estado").val(id);
$("#tab_cidade").load("acha_cidade.php?id_estado="+id);
});

sequer dá o alert que botei pra verificar se está entrando. A diferença entre os links (class="pais") e os links (class="estado") é que o de país já consta no carregamento da página e o de estado só é carregado ao clicar no país pelo método:

$(".pais").click(function(){
var ad = $(this).attr("id");
var xd = ad.split("|");
var id = xd[1];
$("#id_pais").val(id);
$("#tab_estado").load("acha_estado.php?id_pais="+id);
});

 

Veja o código do script que carrega os estados:

$valor = addslashes(trim($_GET["id_pais"]));
$sql = "select * from tb_estado where id_pais='$valor' ORDER BY nom_estado_1";
$dados = pg_query( $conexao, $sql );
?>
<table id="tab2" width="190" border="0" cellspacing="0" cellpadding="0">
<?
while($row = pg_fetch_array($dados))
{
$id_estado = $row["id_estado"];
$nm_estado = $row["nom_estado_1"];
?>
<tr>
<td align="left" valign="middle" class="LinkTahoma11Cinza"><a href="#" id="e|<? echo $id_estado; ?>" [b]class="estado"[/b]><? echo $nm_estado; ?></a></td>
<td width="40" align="right" valign="middle">
<table width="40" border="0" cellspacing="0" cellpadding="0">
   <tr>
   <td width="50%" align="center" valign="middle"><img src="../imagens/Alterar.gif" width="16" height="16" /></td>
   <td align="center" valign="middle"><img src="../imagens/delete.png" width="16" height="16" /></td>
   </tr>
</table>
</td>
</tr>
<? } ?>
</table>

Por favor!!!!! Alguém consegue ver o porque do browser recebe o clique, mas não executa a ação?

Agradeço a ajuda.

[William Bruno 1501]

Leia:

 

http://wbruno.com.br/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

http://wbruno.com.br/2011/04/14/como-debugar-ajax-firebug/

[ernestovm 0]

RESOLVIDO. Deixo a dica para quem tiver o mesmo problema.

Quando você estiver desenvolvendo um projeto TOTALMENTE JQUERY com os conteúdos sendo processados de forma assíncrona com chamadas dos scripts com jquery, lembre-se:

Todas as chamadas jquery que serão feitas no novo conteúdo formatado pelo script PHP, ASP ou outra linguagem devem ser colocados dentro do script. Explicando:

A página index.php é composta de uma div no topo (cabeçalho), outra no meio (conteúdo) e outra abaixo (rodapé). No topo fica o menu com as chamadas às outras páginas do site que serão carregadas na div do meio. Para chamar as páginas a serem carregadas no meio usamos:

<script type="text/javascript" src="../jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$(".div_click").click(function(){

var id = $(this).attr("id");

$("#corpo_pagina").load(id);

});

Assim o navegador NÃO vai abrir mais nenhuma página nem fazer refresh. Todo o conteúdo do site vai sempre ser carregado na div "conteudo". Aí vai a dica:

Como as ações jquery que serão chamadas / executadas nas outras páginas ainda não existem, não são "vistas" pelo jquery que no momento só ver o ".div_click" e a div "#corpo_pagina". Então, se você agrupar nessa páginas as futuras ações jquery, elas não serão executadas. Você deve colocar todas as futuras chamadas em cada uma das páginas que forem sendo chamadas com uma observação: tudo vai ser trabalhado dentro da div "corpo_pagina". Inclusive as divs das páginas serão carregadas dentro dessa div. Então cuidado com design!