Ajax inside inside Ajax?

Question

JavaScript

1) I create dynamic content using ajax in the div#content block in the index.html file

$('#btn1').click(function(){
  $.ajax({
     url: "page.html",
    cache: false,
       success: function(html){
        $("#content").html(html);
    }
  });
});

2) Next, in the already placed div#content + page.html block - the following ajax should be triggered:

$('.btn6').click(function(){
  $.ajax({
     url: "subpage.html",
    cache: false,
       success: function(html){
        $("#content").html(html);
    }
  });
});

a) Ajax does not work in ajax: if you put the 2nd ajax code in a common scripts file that is connected to index.html
b) Ajax works in ajax: if you put it in a subpage called with ajax.

*If I do the second working option, then I get a synchronous XMLHttpRequest - which is outdated

How to make ajax run in ajax from a common scripts file in index.html?
I found something similar with the jQuery on() function - but I can't figure out how to implement it:

$('body').on('click', 'a.edit', function(event){
     // Your code here
})

Pliz - Help!!!)

Answer 1

$('body').on('click', '.btn6', function(event){
     $.ajax({
     url: "subpage.html",
    cache: false,
       success: function(html){
        $("#content").html(html);
    }
  });
})

Answer 2

Конечно не будет работать ваш вариант "а", т.к. вы пытаетесь повесить событие на несуществующий элемент btn6, который будет асинхронно загружен позднее. Вам правильно написали, что событие нужно весить на body или на document.
И, по хорошему, нужно указывать тип данных, которые вы планируете получить в результате ajax запроса...