4

Estou desenvolvendo um botão de deletar no formulário de produtos que tenho, ele funciona assim

  • Categoria 1 (Radio Button)
  • Categoria 2 (Radio Button)

Após seleciona uma categoria, ele envia um comando jQuery para a função $.post e cria elementos html em uma parte do site com vários radio button assim:

  • Filtro 1 (DELETAR)
  • Filtro 2 (DELETAR)
  • Filtro 3 (DELETAR)

Ao clicar em (DELETAR) ele tem que executar uma função com o seguinte código

 $("a#filtro").click(function(){
        alert($(this).attr('valor'));
 });

Ou seja, o cliente vai selecionar uma categoria e ao selecionar irá gerar um HTML com Radio Button para filtros e ao selecionar um filtro ele da um alert() exibindo o valor do filtro. O Problema é que o código do alert não está executando, pois acho que é por causa que ele é adicionado por $("#meusfiltros").html('codigo-html-aqui'); . Agora se eu clico em um link com a mesmo div #filtro ele exibe sem problemas, pois já estava na página na hora que carregou.

0

1 Resposta 1

4

Exatamente como você suspeita aqui precisa delegar o evento desse $("a#filtro").click( pois ele não existia ainda quando esse código foi lido.

Visto que #meusfiltros já existia na página quando o código foi lido, então pode fazer assim:

$("#meusfiltros").on('click', "#filtro", function(){
// ou mesmo (ainda mais seguro) 
$(document).on('click', "#filtro", function(){

O método .on() é permite delegar o evento para casos em que o elemento for adicionado dinamicamente (depois de o código ter sido corrido).

Sugiro dar uma olhada a esta resposta: https://pt.stackoverflow.com/a/5199/129 sobre a diferença de usar o .on() e delegação de eventos.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .