Link with ajax result does not accept click

0

I have the following status with 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 on:

<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 because it should call ajax again and it does not call. Can someone give a boost?

    
asked by anonymous 28.04.2018 / 20:02

1 answer

0

As href of the link has only one hash ( # ), you are wanting to capture the click on the link through .click or .on("click") . Because 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 get the click through document and not directly on the element (why it does not exist in the DOM) using the .on method, like this:

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

   // ação quando o link for clicado

});
    
28.04.2018 / 22:59