Link with ajax result does not accept click

Question

I have the following matching ajax call:

$(document).ready(function() {
    $(".atualizarAjax").click(function(){
   	var id = $(this).attr("data-id");
        $.ajax({
            type: 'GET',
            url: "<?= HOME ?>/ajax_carrinho.php",
            data :  "id="+id,
            beforeSend: function(){
            $(".carregando").show();
            $(".carregando").html("<img src='<?= HOME ?>/img/ajax-loader.gif' style='width: 20px; height: 20px;'> Adicionando...");
            },
            success: function (data) {
                $('.carrinhoGO').html(data);
                $('.recarrega').load("<?= HOME ?>/ajax_produtos.php?id="+id);
                $(".carregando").hide();
                
            }
        });
  	return false;       
    });
});
<!-- begin snippet: js hide: false console: true babel: false -->

<a href="#" id="atualizarAjax" data-id="<?= $value['id']?>" class="btn btn-info btn-xs atualizarAjax"><i class="fa fa-plus"></i>&nbsp;Comprar</a>

The problem is that in the file that loads on this line:

 $('.recarrega').load("<?= HOME ?>/ajax_produtos.php?id="+id);

Contains a link to be clicked:

<a href="#" id="atualizarAjax" data-id="<?= $value['id']?>" class="btn btn-info btn-xs atualizarAjax"><i class="fa fa-plus"></i>&nbsp;Comprar</a>

This link does not work as it should call ajax again and does not call. Someone can lend a hand?

Answer 1

Like the href link has only one hash (#), you are wanting to capture the click on the link through a .click or .on("click"). Since this link was dynamically added to the page by Ajax, it was not in the DOM when the page was rendered.

What you have to do is catch the click by document and not directly by the element (because it does not exist in the DOM) using the method .on, in this way:

$(document).on("click", "#atualizarAjax", function(){

   // ação quando o link for clicado

});