[Resolvido] jQuery - Problema com criação de elementos dinamicos
Olá a todos. Este é o meu primeiro post no forum e estou com um problema bem chatinho; passei o dia pesquisando, vendo nos meus livros, internet... e nada.
Bem, o que ocorre é o seguinte: Estou criando em um site, um sistema para listar as categorias de fotos de uma galeria, onde, ao serem clicadas, é aberto um quadro com jQuery (parecido com Thickbox), que, insiro o conteúdo com a função .html(), porém, este conteúdo inserido, são as miniaturas de fotos que serão clicadas e abertas em baixo maiores, utilizando também jQuery.
Facilitando o entendimento, é isso aqui: LISTAGEM DE CATEGORIAS -> QUADRO JQUERY COM MINIATURAS -> FOTO MAIOR
O código jQuery que abre o quadro e insere as miniaturas é este:
$('a.q').live('click', function() {
var link = $(this).attr('href');
$.get('inc/util/ajaxer.php', {id: link}, function(data){
var z = data.substr(0,3);
$('div#fadebox div#q').animate({width:z+'px'},600,function() {
$('div#fadebox div#q #conteudo').hide().html(data.substring(3)).slideDown(700);
});
});
return false;
});
OBS1: Ocultei algumas linhas do código a fim de torná-lo o mais claro possível, porém a parte da funcionalidade está aí.
OBS2: A razão de eu ter colocado substr e substring no código foi por que, os três primeiros caracteres do resultado do meu ajaxer.php significam a largura que desejo do quadro jQuery. Por exemplo: Se o resultado foi "450123", o quadro deverá ser redimensionado para 450px de largura e inserir com html() os números "123".
OBS3: Estou utilizando a função "$('a.q').live('click', function() {" para referenciar o clique no link com class="q", porém antes esta função estava "$('a.q').click(function() {" e o resultado era o mesmo.
O código PHP do ajaxer.php retornado, é algo parecido com isso:
<div id="galeria_thumbs">
<?php
while ($x = mysqli_fetch_assoc($sql)) {
?>
<div><a href="#" class="g"><img src="ups/fotos/tmb/<?php echo $x['img']; ?>.jpg" alt="<?php echo $x['nome']; ?>" /></a></div>
<?php
}
?>
</div>
O que podemos perceber é que faço uma listagem das miniaturas que serão clicadas, colocando um <a> com class="g", que iria criar um funcionamento similar ao da função que abre o quadro jQuery.
O PROBLEMA: Crio os links com class="g" perfeitamente, e as imagens estão prontas para serem clicadas, entretanto, pelo que entendi, o jQuery não consegue reconhecer estes links, pois os mesmos foram criados dinamicamente, a partir da funcao html() e provavelmente não encontram-se no DOM. Tentei, sem sucesso, utilizar a função live do jQuery, porém o resultado foi igual, e ao clicar nos links que foram criados dinamicamente, não ocorre nada, enquanto deveria dar um alert(1);, já que criei esta função em meu arquivo jQuery:
function wq () {
alert(1);
}
$('a.g').click(function() { wq(); });
Meu objetivo é: fazer uma "funcao" no jQuery como a "$('a.q').click(function() {" do código acima, porém que funcione com os "a.g" que foram criados dinamicamente.
Ideias? Pitacos? Palpites? Qualquer coisa ajuda.
Abração.
Discussão (3)
Carregando comentários...