[Resolvido] Problema .on() jquery

[maicon_m 0]

Olá.

 

Estou criando uma interação onde uma div é populada por uma lista de itens carregados através do $.get(). Ao clicar sobre um dos links carregados a açao é disparada. O problema é que o evento não esta sendo vinculado aos links carregados, então ao clicar neles a página recarrega ao invés de somente pegar o valor.

 

No exemplo da estrutura abaixo, quero fazer com que, ao clicar sobre o link, o span #valor-cor tenha o attributo data-value populado pelo attributo href do link clicado.

 

Estrutura HTML

 

<div class="cor">
<span id="valor-cor" data-value="">Cor</span>
<div>
<span id="fechar-corzin" class="fechar">fechar</span>
<a name="177" href="12">
<a name="180" href="15">
<a name="182" href="17">
<a name="184E" href="19">
</div>
</div>

 

Javascript

 

//busca novos links para serem listados na div das cores
$.get('buscaCorMenor.php',{id:id}, function(retorno){
  $('.cor div').empty().html(retorno);
})

//ao clicar no link o span #valor-cor recebe as informações
//problema é que ao clicar o preventDefault() não esta funcionando e o link é disparado recarregando a página
$('.cor a').on('click', function(event){
  $('#valor-cor').text($(this).attr('name')).attr('data-value',$(this).attr('href'));
  $divcor.fadeOut();
  event.preventDefault();
})

[William Bruno 1501]

a tag <a> precisa de fechamento ... o html que você postou é oque você está usando ?

 

como é o retorno do ajax?

 

 

aparece algum erro no console ?

[maicon_m 0]

William, acabei colocando só metade do código da lista. Abaixo retorno já formatado retirado do Firebug:

 

<span id="valor-cor" data-value="">Cor</span>
<div style="display: block;">
<span id="fechar-corzin" class="fechar">fechar</span>
<a name="177" href="12">
177
<br>
<img width="80" height="18.390804597701" alt="" src="img/cores/e2547c43ce1ba7e565bda9f8d51db17b.jpg">
</a>
<a name="179" href="14">
179
<br>
<img width="80" height="18" alt="" src="img/cores/ece49514539960f4406a331047a2dae3.jpg">
</a>
<a name="189E" href="21">
189E
<br>
<img width="80" height="18" alt="" src="img/cores/dd33b64853e88c858fad0fcc82602690.jpg">
</a>
<a name="190" href="22">
190
<br>
<img width="80" height="18" alt="" src="img/cores/c4a4d97af1cd32cf59369959507434f8.jpg">
</a>
</div>

 

No Console não aparece nenhum erro.

[William Bruno 1501]

só por teste, use o .live() no lugar do .on()

 

.live('click'

 

e se possível poste um link online, pq tb não vi nada incorreto no código.

[maicon_m 0]

Realmente funcionou com o live() William. Pensei que já tivesse testado com ele...

 

A questão que fica é que o live() esta deprecated no jQuery 1.7 . Bem, pelo menos consigo progredir desta forma...

 

Obrigado pela agilidade na resposta você salvou o meu dia.

 

Abraço.

[William Bruno 1501]

Oi @maicon_m, o"grande problema" do .live() é que alegam que ele "usa muita memória".. mas ele é eficiente!

 

a jQuery recomenda o uso do .delegate(), mas eu tb já tive problemas com ele, e somente o .live() resolvia corretamente oque eu precisava.

Pelo visto, é o mesmo caso do .on(), ainda não fizeram um substituto perfeito para o .live().