AJAX / jQuery call running only once

Question

AJAX / jQuery call running only once

Navigation

#1 by (1 votes)

0

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.

php jquery ajax

asked by anonymous 06.12.2018 / 12:51

1 answer

Skip list for model Connect form with database

score 1 · Accepted Answer

As the links are dynamic, using jquery in this way it can not identify the click, so select a parent.

I created a "parent" id, since you should use these classes from your html example elsewhere in your code, so the selection is in the right place, I created an id, I put "father", but you can put it any way you like.

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

Then I select the parent and look for the ".btn-net", this way it can get 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 small example like yours that does not 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 dynamically generated are not they work

Run

Same example but selecting parent and working

HTML

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

Jquery

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

In this way the dynamic buttons work normally.

Run