.click function does not work on buttons that were generated dynamically by the .html function? [duplicate]

Do not do it this way:

$("button[name='btnAtender']").click(function(){
    alert('teste');
});

And this way:

$("button[name='btnAtender']").on('click', function(){
    alert('teste');
});

  

"This is basically how the association for the .click element is made.   applies to the current DOM, while .on (using delegation) will continue   for new elements added to the DOM after the association   of the event. "

Source: link

No, because DOM has already been rendered, but you can solve by referring to document

$(document).on('click', '#gerar', function(){
   $('body').append('<button id="gerado">Executar Alert</button>')
})

$(document).on('click', '#gerado', function(){
    alert('oi')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttonid="gerar">Gerar</button>

Set a promisse , stay like this ...

Set the click event as a function

function comp(){
    $("button[name='btnAtender']").on('click',function(){
        alert('teste');
    });
}

Placing the html

$("#tab_logic tbody").html(html).promise().done(function(){
    comp();
});

Your function will extend, so it will not be necessary to call the whole code again.

I'll explain what happens. When you put this first code, the btnAtender button does not yet exist. There are several ways to work around this, but the one that would fix it quickly (and ugly) would be to put the code:

$("button[name='btnAtender']").on('click',function(){
    alert('teste');
});

just below this:

$("#tab_logic tbody").html(html);

This way the button will already be on the page when click is associated.

Try this:

var nReqAJAX = nReqAR
$.ajax({
    type: "POST",
    url: "../controller/ajax.selectItemRequisicaoPesquisar.php",
    data: {'numeroRequisicao': nReqAJAX},
    dataType: "JSON",
    success: function(res) {
        if(res == null)
        {
            $('#modalReqInvalida').modal('show');
        }
        else
        {
            var html = res.reduce(function(string, obj, i) {
                return string + '<tr class="text-center"><td style="vertical-align: middle;">' + i + '</td><td style="vertical-align: middle;">' + obj.nome_GAThemocomponente + '</td><td style="vertical-align: middle;">' + obj.qtd_GATitemRequisicao + '</td><td style="vertical-align: middle;">' + obj.frequencia_GATitemRequisicao + '</td><td style="vertical-align: middle;">' + obj.cirurgia_GATitemRequisicao + '</td><td><button id="1" name="btnAtender" class="btn btn-success" style="width: 100%;">Atender Item</button></td></tr>'
            }, '');
            $("#tab_logic tbody").html(html);
            $("button[name='btnAtender']").on(function(){
               alert('teste');
            });
        }
    }
});