为什么 AJAX 之后 DOM 不完整

Question

I have an AJAX function that populates a page using an on('click')... delegate function and creates 2 or more flex containers each of which has it's own unique id. The id and class is displayed in each flex div block. An outline of the code is shown below:

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

This works fine and output looks like this

Next I wanted to add content to each block based on the id value of the block and then the problems started. As a proof of concept, I created a function called populate_snapshot and added the function call to the code below the AJAX function:

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

so that it executes directly after the AJAX function to replace the content in each block. The populate_snapshot function looks like this

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

However, the console log does not find the flex containers and the output does not change when this runs.

If I include an alert() into populate_snapshot as shown, then the function works fine after I dismiss the popup:

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

the console log shows the 2 flex containers and output becomes

It is as though the DOM needs to be refreshed before the populate_snapshot function can run. Is there some way to do this or is there something more fundamental that I am missing. Is this an event-bubbling issue? and Is there some other way to delegate the populate_snapshot function so that it runs automatically after completion of the AJAX call?

I thought about using ajaxComplete() after the AJAX to trigger populate_snapshot, but this will not work because my populate_snapshot will later use another AJAX function and this will result in an endless loop.

Any help with this will be appreciated.

Answer 1

Thanks to @Andreas for his advice - this answer is totally to his credit.

Here is how I used this advice to solve my problem. The AJAX part of the code was changed as follows (notice the.then() function):

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

The populate_snapshot function is:

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

and the proof of concept output is as expected

Again, thanks and all quedos to @Andreas.