Button generated within $.ajax return does not work

Question

I need some help here.

So I’m using $.ajax of jQuery to fetch data in the database and enter a php variable $html that will bring a content already ready.

The problem is that in that contents I have a button

$html .= "

  <button id='btnRelatorio' class='button'>Gerar Relatório</button>

";

and I have on the page that will receive this $.ajax one jquery for this button

$(document).ready(function (e) {

  $("#btnRelatorio").click ( function () {

    alert();

  });

});

But the alert does not fire.

Any idea why?

Obs.: o class='button' is working properly but the js nay Just happens nothing and gives error in the console

Answer 1

For dynamically generated elements it does not even find.

You need to do something like

$(document).on('click', '#btnRelatorio', function(){ 
     alert();
});