Почему DOM не завершен после AJAX

Question

У меня есть функция AJAX, которая заполняет страницу с помощью функции делегата on ('click') ... и создает 2 или более гибких контейнера, каждый из которых имеет собственный уникальный идентификатор. Идентификатор и класс отображаются в каждом гибком блоке div. Схема кода показана ниже:

$('li.dicap_menu_action a').on("click",function(){
  var dicap_action =  $(this).attr("href");
  $.ajax({
    //call to php function that defines the blocks
  });
  return false; //prevent the browser from following the link
});

Это работает нормально, и результат выглядит следующим образом

Далее я хотел чтобы добавить контент в каждый блок на основе значения идентификатора блока, и тогда начались проблемы. В качестве доказательства концепции я создал функцию под названием populate_snapshot и добавил вызов функции в код под функцией AJAX:

$('li.dicap_menu_action a').on("click",function(){
    var dicap_action =  $(this).attr("href");
    $.ajax({
        //call to php function that defines the blocks
    });
    populate_snapshot();
    return false; //prevent the browser from following the link
});

, чтобы она выполнялась сразу после AJAX функция для замены содержимого в каждом блоке. Функция populate_snapshot выглядит так:

function populate_snapshot(){
    var $flx = $('div.dicap-flex-2');
    console.log($flx);
    $flx.each(function() {
        $(this).html('This block was found');
    });
}

Однако журнал консоли не находит гибкие контейнеры, и вывод не изменяется при его запуске.

Если я включите alert () в populate_snapshot, как показано, тогда функция будет работать нормально после того, как я закрою всплывающее окно:

function populate_snapshot(){
    alert('Test');
    var $flx = $('div.dicap-flex-2');
    console.log($flx);
    $flx.each(function() {
        $(this).html('This block was found');
    });
}

в журнале консоли отображаются 2 гибких контейнера, а вывод становится

Это как если бы DOM нужно было обновить перед запуском функции populate_snapshot. Есть ли способ сделать это или есть что-то более важное, чего мне не хватает. Это проблема с всплывающими событиями? и Есть ли другой способ делегировать функцию populate_snapshot, чтобы она запускалась автоматически после завершения вызова AJAX?

Я думал об использовании ajaxComplete () после AJAX для запуска populate_snapshot, но это будет не работает, потому что мой populate_snapshot позже будет использовать другую функцию AJAX, и это приведет к бесконечному l oop.

Любая помощь с этим будет оценена.

Answer 1

Спасибо @Andreas за его совет - этот ответ полностью его заслуга.

Вот как я использовал этот совет для решения своей проблемы. Часть AJAX кода была изменена следующим образом (обратите внимание на функцию .then ()):

$('li.dicap_menu_action a').on("click",function(){
    var dicap_action =  $(this).attr("href");
    var aj = $.ajax({
        //call to php function that defines the blocks
    });
    aj.then(function(){
      populate_snapshot();
    })
    return false; //prevent the browser from following the link
});

Функция populate_snapshot:

function populate_snapshot(){
    var $flx = $('div.dicap-flex-2');
    console.log($flx);
    $flx.each(function() {
        $(this).html('This block was found');
    });
}

и доказательство концепции вывод соответствует ожиданиям

Опять же, спасибо и все ответы @ Andreas.