Ajax внутри внутри Ajax?

Question

[Alex Sokol]

1) Создаю с помощью ajax динамический контент в блоке div#content в файле index.html

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

2) Далее в уже помещенном блоке div#content + page.html - должен запускаться следующий ajax:

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

a) Не работает ajax в ajax: если поместить 2ой код ajax в общий файл scripts который подключен к index.html
b) Работает ajax в ajax: если поместить в его в вызванную с помощью ajax страницу subpage.

*Если делать вторым рабочим вариантом, то получаю синхронный XMLHttpRequest - который устаревший

Как сделать, чтобы запускался ajax в ajax с общего файла scripts в index.html?
Нашел что-то похожее с функцией jQuery on() - однако не могу понять как можно реализовать:

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

Плиз - Хелп!!!)

Answer 1

[Rockman]

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

Comments

[Alex Sokol]

Спасибо. Работает)

Answer 2

[DAlex]

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

Comments

[Alex Sokol]

Спасибо за "Тип данных". И без них загружается динамический контент, и в консоле ошибки нету.