jquery - 在另一个 ajax 的成功中调用一个 ajax

Question

在单击歌手类按钮时，返回歌手的姓名和具有各自歌曲名称（数据）的音乐类按钮。单击音乐类按钮时，返回歌曲歌词（data2），此时我想添加一个按钮来激活第一个 ajax（歌手类）以再次关联歌手和他各自的歌曲。我尝试在 data2 上返回歌手类按钮，但它不起作用。有什么方法可以执行此操作吗？

$('.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 
});

Answer 1

由于您正在动态创建按钮，因此请使用带有.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 
});