Calling an ajax within the success of another ajax

Question

At the click of a singer class button, the name of the singer and buttons with music class with their respective song names (data) are returned. When clicking on a music class button, the song lyrics (data2) is returned, at this point I would like to add a button to activate the first ajax (singer class) to relate the singer and his respective songs again. I made an attempt to return a singer class button on data2 but it doesn't work. Is there any way to perform this operation?.

$('.singer').click(function() {

  $th = $(this);
  $.ajax({
    url: "page1.php",
    type: 'GET',
    data: {
      singer: $th.attr("title")
    },
    success: function(data) {
      $("#result").html(data);

      $('.music').click(function() {
        $thm = $(this);
        $.ajax({
          url: "page2.php",
          type: 'GET',
          data: {
            identificador: $thm.attr("title")
          },
          success: function(data2) {
            /*########### For example, in data2 return too
              <button class="singer" title="Madona">Madona</button> 
              but it doesn't work
            ###### */

            $("#result").html(data2);
          },
          error: function() {
            $("#result").html("error");
          }
        }); //ajax 
      });
    },
    error: function() {
      $("#result").html("Error");
    }
  }); //ajax 
});

Don't bind handlers inside other handlers. If you're creating elements dynamically, use event delegation: https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Barmar, Jan 14 '21 at 21:40

score 0 · Accepted Answer · answered Jan 14 '21 at 21:55

0

Since you're creating the buttons dynamically, use event delegation with .on().

$(document).on("click", ".singer", function() {
  $th = $(this);
  $.ajax({
    url: "page1.php",
    type: 'GET',
    data: {
      singer: $th.attr("title")
    },
    success: function(data) {
      $("#result").html(data);
    },
    error: function() {
      $("#result").html("Error");
    }
  }); //ajax 
});

$(document) on("click", ".music", function() {
  $thm = $(this);
  $.ajax({
    url: "page2.php",
    type: 'GET',
    data: {
      identificador: $thm.attr("title")
    },
    success: function(data2) {
      $("#result").html(data2);
    },
    error: function() {
      $("#result").html("error");
    }
  }); //ajax 
});

answered Jan 14 '21 at 21:55

Barmar

741,623
53
500
612

I'm not sure why it doesn't work. The classes in your page are different, you translated things to English here. – Barmar Jan 15 '21 at 00:11
yes, but this is not a problem as is the path and name of the php pages.In the test I put everything back into your code. cantor class instead of singer, musica instead of music, vedere / cantorMobile.php instead of page1.php and ... – Jan 15 '21 at 00:58
Your code works perfectly fine, my jquery was out of date – Jan 15 '21 at 09:42

Calling an ajax within the success of another ajax

1 Answers1