Calling an ajax inside the sucess of another ajax contained in the first ajax

Question

At the click of a class button cantor is returned the singer’s name and buttons with class musica with their respective song names (data). By clicking a class button musica is returned to the lyrics of the song (data2), at that point I would like to add a button to trigger the first ajax (classe cantor) to relate the singer and their respective songs again. I made an attempt as can be seen in the comments of the script below, but it does not work. Is there any way to perform this operation?

$('.cantor').click(function() {
 
    $th = $(this);
      $.ajax({
        url: "pagina1.php",
        type: 'GET',
        data: {cantor: $th.attr( "title" )},
        success: function(data){
            $("#resultados").html(data);

                        $('.musica').click(function() {
                          $thm = $(this);
                          $.ajax({
                            url: "pagina2.php",
                            type: 'GET',
                            data: {identificador: $thm.attr( "title" )},
                            success: function(data2){
                            
                            
                                /*########### tentativa coloquei um button class cantor - não funciona ###### */
                                $("#resultados").html('<button class="cantor" title="Fulano de Tal">Fulano de Tal</button>'+data2);
                                
                                
                                
                            },
                            error: function(){
                                $("#resultados").html("Ouve um erro ao enviar sua URL");
                            }
                         });//ajax 
                    });

            
        },
        error: function(){
            $("#resultados").html("Ouve um erro ao enviar sua URL");
        }
     });//ajax 
});

Answer 1

Would that be?

$('.musica').click(function (e) {
    e.preventDefault();

    $thm = $(this);
    $.ajax({
        url: "pagina2.php",
        type: 'GET',
        data: { identificador: $thm.attr("title") },
        success: function (data2) {

            /*########### tentativa coloquei um button class cantor - não funciona ###### */
            $("#resultados").html('<button class="cantor" title="Fulano de Tal">Fulano de Tal</button>' + data2);

        },
        error: function () {
            $("#resultados").html("Ouve um erro ao enviar sua URL");
        }
    });//ajax 
});

$('.cantor').click(function (e) {
    e.preventDefault();
    
    $th = $(this);
    $.ajax({
        url: "pagina1.php",
        type: 'GET',
        data: { cantor: $th.attr("title") },
        success: function (data) {
            $("#resultados").html(data);

            // Chama o evento de clique
            $('.musica').trigger('click');


        },
        error: function () {
            $("#resultados").html("Ouve um erro ao enviar sua URL");
        }
    });//ajax 
});