0

Eu tenho uma função ajax que retorna um conteúdo com um botão. Gostaria de chamar uma outra função acionada pelo botão que o ajax retornou, como no exemplo abaixo:

<button id="procurar" type="button">Procurar</button>
<div id="resultado"></div>
<script>
$("#procurar").click(function(){
        buscadados();
});

$("#procurar").click(function(){
        meuretorno("Botão retorno funcionou!");
});

function buscadados(){
        $.ajax({
            type: "POST",
            url: "/dados.php",
            data:  {
                cep:"valor"
                },
            dataType: "html",
            error: function(){
                alert('Erro');
            },
            success: function(html){
                $("#resultado").html(html);
            }
        });
    }
</script>

E no dados.php, algo simples:

<button id="meuretorno" type="button">Botão retorno</button>

Ele retorna o valor certinho, mas ao clicar no botão #meuretorno, não acontece nada, acho que porque ele foi inserido pelo ajax.

Tem como eu identificar o clique desse novo botão?

1 Resposta 1

1

Quando adicionamos elementos dinamicamente ao DOM, usando o on() do JQuery para atachar o evento.

Mais aqui na documentação: https://api.jquery.com/on/

Veja esse exmplo:

$('body').on('click', '.bt', function() { 
  alert("oi"); 
});

$('#testar').click(function() {
   var elemento = $("<button class='bt'>Clique aqui, fui adicionado dinamicamente</button>");
   $("#resultado").append(elemento);

});
.resultado {
  display: inline-block;
  border: solid 1px blue;
  margin-top: 50px;
  width: 100px
}
<p>
   <button id="testar">Clique aqui para gerar o novo elemento</button>
</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="resultado"></div>

3
  • Nesse exemplo de código on() ou click() não fazem diferença nenhuma, se adicionar o conteúdo dinâmico depois da declaração da ação do botão, ambos não vão funcionar. O correto seria orientar que o seletor do .on() tem que ser um elemento ascendente que não foi adicionado dinamicamente e em seguida no segundo parâmetro do .on() informar qual o seletor (adicionado dinamicamente) que o click deve procurar. Na resposta dessa pergunta explica melhor. 14/05/2020 às 15:30
  • editei o código para demonstrar quando adiciona elementos dinamicamente para tirar qualquer dúvida 15/05/2020 às 13:39
  • Agora sim com o seletor no document faz diferença. 15/05/2020 às 21:49

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 .