Bom dia galera, estou montando um esquema de arvore(rede) onde envio os paramentos via GET a minha API, e ela me retorna os dados para montar meu código é o seguinte:
$('.btn-rede').click(function () {
let nivel = $(this).attr('data-nivel');
let pai = $(this).attr('data-pai');
console.log(nivel + ' ' + pai);
$.ajax({
url: HOME_URI + '/webservices/getRede',
type: 'GET',
data: {
pai: pai,
nivel: nivel,
},
headers: {
'token': '14f6d2b53b059116h23rs915e6329b6f19a3'
},
success: function(data) {
$.each(data, function (rede) {
$('#rede').append(`
<button class="btn btn-success btn-circle btn-md btn-rede" data-nivel="`+ data[rede]['nivel'] + `"data-pai="`+ data[rede]['cli_id'] + `">` + data[rede]['nivel'] + `</button>
<span> `+ data[rede]['cli_nome'] + `</span>
`);
});
}
});
});
No lado do meu HTML eu estou montando da seguinte maneira:
<div class="row">
<div class="col-sm-12">
<div class="white-box">
<div class="col-md-12 text-center">
<button class="btn btn-success btn-circle btn-md btn-rede" data-pai="1" data-nivel="1"> 1</button>
<span> RCC Alimentos</span>
<div id="rede"></div>
</div>
</div>
</div>
</div>
Ou seja meu nó inicial, sempre será fixo, porém todos os outros são dinâmicos, e são populados conforme a resposta da minha API e inseridos na minha #rede
. Do modo que estou montando ele está apenas fazendo a requisição e buscando apenas o data-pai="1"
e o data-nivel="2"
porém, se eu clicar em um button que é do nível 2 ele não realiza a busca, alguém tem alguma ideia do que pode ser?
Print de como está me retornando no momento: https://prnt.sc/lrguiz OBS: Os nós de nível 2 todos possuem filhos mas como expliquei o jQuery não pega a ação do click do botão para realizar o AJAX.