0

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.

1 Resposta 1

2

Como os link são dinâmicos, usando o jquery desta forma ele não consegue identificar o click, para isso selecione um pai.

Criei um id "pai", já que você deve usar estas classes do seu exemplo html em outros lugares do seu código, para que a seleção esteja no ponto certo, criei um id qualquer, coloquei "pai", mas você pode colocar como quiser.

<div class="row" id="pai">
    <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>

Então eu seleciono o pai e procuro os ".btn-rede", desta forma ele consegue pegar os cliques, mesmo com elementos dinâmicos.

$('#pai').on("click", ".btn-rede", 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>
                `);
            });
        }
    });
});

Um pequeno exemplo como o seu, que não funciona

HTML

<div id="banner-message">
  <button class="botao">Change color</button>
</div>

Jquery

$(".botao").on("click", function(){
  $("#banner-message").append($(".botao").clone());
});

Você pode perceber que os botões que são gerados dinamicamente não funcionam

Executar

O mesmo exemplo mas selecionando o pai e funcionando

HTML

<div id="banner-message">
  <button class="botao">Change color</button>
</div>

Jquery

$("#banner-message").on("click", ".botao", function(){
  $("#banner-message").append($(".botao").clone());
});

Desta forma os botões dinâmicos funcionam normalmente.

Executar

1
  • 1
    Wictor muito obrigado! Não tinha percebido este detalhe, e que precisava definir um id para ser o principal.
    – Tiago Paza
    Commented 6/12/2018 às 13:17

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 .