Hello everyone, I'm setting up a tree (network) scheme where I send the frames via GET to my API, and it returns the data to put together my code:
$('.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'm 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>
In other words, my initial node will always be fixed, but all others are dynamic, and are populated according to my API response and inserted into my #rede
. In the way I am mounting it is just doing the request and searching only for data-pai="1"
and data-nivel="2"
however, if I click on a button that is level 2 it does not perform the search, does anyone have any idea what can be ?
Print how you are currently returning me: link NOTE: Level 2 nodes all have children but as I explained, jQuery does not take the action of the button click to perform the AJAX.