AJAX/jQuery call running only once

Question

Good morning guys, I am setting up a tree scheme (network) where I send the parameters via GET to my API, and it returns me the data to mount my code is as follows:

$('.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>
                `);
            });
        }
    });
});

On the side of my HTML I am mounting as follows:

<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>

That is my initial node, it will always be fixed, but all the others are dynamic, and are populated according to the response of my API and inserted in my #rede. The way I’m putting it together he’s just doing the requisition and just looking for the data-pai="1" and the data-nivel="2" however, if I click a button that is level 2 it does not perform the search, someone has some idea of what might be?

Print of how you are returning me at the moment: https://prnt.sc/lrguiz NOTE: Level 2 nodes all have children but as I explained jQuery does not take the action of clicking the button to perform AJAX.

Answer 1

Since the links are dynamic, using jquery this way it cannot identify the click, so select a parent.

I created a "parent" id, since you should use these classes of your html example in other places of your code, so that the selection is at the right point, I created any id, I put "parent", but you can put as you want.

<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>

So I select the parent and look for the ". btn-net", this way it can catch the clicks, even with dynamic elements.

$('#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>
                `);
            });
        }
    });
});

A little example like yours that doesn’t work

HTML

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

Jquery

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

You may notice that buttons that are generated dynamically do not work

Execute

The same example but selecting the father and running

HTML

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

Jquery

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

This way dynamic buttons work normally.

Execute