How to execute jQuery function after AJAX changes html of element?

I am trying to execute the following scenario:

• The user selects an employee (option) for the selected item.
• The user clicks a button twice / clicks a button which calls a function with a POST request to the server.
• POST returns a JSON string (containing the HTML portion with structure for the new select element).
• The POST callback does two things, one that loads an array with the JSON content, and another that replaces the old selection (containing the list of employees) with the new selection issued by the POST.

Everything works fine up to this point.

5. The new selection is populated with parameters that are stored in an array (containing the data received by POST as JSON data).

I need to automate this. I can already get it to work using the click event on the newly generated button, but I intend to load a new select with the loaded content.

I do not want to generate a new element containing its content, because as the user interacts with the content, it will be modified. There is no need to duplicate code to populate the selection in both jQuery and PHP. It's much easier to just use jQuery to create options for selection.

I tried the "complete" option but it still doesn't work.

EDIT: I created a js script: https://jsfiddle.net/bmv35vwz/

My code:

function load_edituser(){
    iduser = $("select.showallusers option:selected").val();
    name = $("select.showallusers option:selected").text();
    $.ajax({'url': base_url+'/ManageUser/open_edituser',
            'type': 'POST',
            'data':{'iduser': iduser, 'name': name},
            'success' : function(data){
                var container = $('.usermanagement-canvas');
                if(data)
                {
                    get_user_apps(); //it loads the array with the JSON data, it another POST function.
                    container.html(data);
                }
                else
                    alert('Error!!');
            },
            'complete': function()
            {
                display_user_apps(); //This is the function that fills the select with options, not being called here.
            }
    });     
}


function get_user_apps(){   

    //alert("it works! name: "+name+" id: "+iduser);

    $.ajax({'url': base_url+'/ManageUser/get_json_user_apps',
            'type': 'POST',
            'data':{'iduser': iduser, 'name': name},
            'success' : function(data){
                //alert("Hell yes");
                //var container = $('.usermanagement-canvas');
                if(data)
                {
                    appsinfo = JSON.parse(data);
                }
                else
                    alert('Error!!');
            }   
    });     
}

function display_user_apps()
{
    //alert(appsinfo.currentapps.length);

    //alert("Shut up");

    var i;
    for (i = 0; i < appsinfo.currentapps.length; i++)
    {
        var id = appsinfo.currentapps[i].idApplication;
        var appName = appsinfo.currentapps[i].appName;

        currentlist += "<option value="+id+">"+appName+"</option>";         
    }
    $("select.left-current").html(currentlist);

    for(i=0; i < appsinfo.excludedapps.length; i++)
    {
        var id = appsinfo.excludedapps[i].idApplication;
        var appName = appsinfo.excludedapps[i].appName;

        notallowedlist += "<option value="+id+">"+appName+"</option>";  
    }
    $("select.right-excluded").html(notallowedlist);
}

      

        
        
        
      

    

EDIT

I am aware of event delegation. I use this to make the button work:

$(".usermanagement-canvas").on("click","button.testbutton",display_user_apps);

However, I do NOT want to use the button. I want the trigger function to be automatic immediately after the html AJAX div changes. In this case, I would need some kind of event that detects the HTML change.