How to fire change event on dynamically created select options?

Question

I'm on my second day trying to figure this out. I've got a select / option list that's created dynamically from an AJAX call. The AJAX call populates the options (Jira projects) and when the user chooses a project from the options, I want to fire an event so I can capture the chosen project, then make another AJAX call to populate the properties for that specific project into another select / option dropdown.

The initial AJAX call looks like this (slightly modified from the original jQuery $.get example), and populates the dropdown just fine (you need to be logged onto Jira for this to work properly):

JS:

    function getProjects(){
    var jiraProject = $.get( "https://jira.atlassian.com/rest/api/2/project", function() {
      alert( "success" );
    })
      .done(function() {
            jiraProject = jiraProject.responseJSON;
            var select = document.getElementById("jiraProjectsList");
            for (i = 0; i < jiraProject.length; i++) {
                var opt = document.createElement('option');
                opt.value = jiraProject[i].name;
                opt.innerHTML = jiraProject[i].name;
                select.appendChild(opt);
            }
            $('#jiraProjectsList').hide().show();//refreshes the option list
        alert( "second success" );
      })
      .fail(function() {
        alert( "error" );
      })
      .always(function() {
        alert( "finished" );
      });

    // Perform other work here ...

    // Set another completion function for the request above
    jiraProject.always(function() {
      alert( "second finished" );
    });
}

HTML:

<label for="jiraProjectsList">JIRA Projects</label>
<select name="jiraProjectsList" id="jiraProjectsList" data-native-menu="false" class="filterable-select"></select>  

I can't seem to figure out how to get the change event to fire when a user selects an option.

Here's an abbreviated selection of the various things I've tried:

$("#jiraProjectsList").change(function() {
    alert("Inside jiraProjectList change function");
    var selectedProject = $(this.val());
    console.log(selectedProject);
    getComponents(selectedProject.key);//next AJAX call
});

$("#jiraProjectsList").find(":selected").change(function(){
    alert("hi mom!");
});

From this SO question I've tried:

$('#jiraProjectsList').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
});

From this SO question, I've tried:

$('#jiraProjectsList').find('option').click(function () {
    var optionSelected = $(this);
    var valueSelected  = optionSelected.val();
    var textSelected   = optionSelected.text();
    console.log(optionSelected);
    console.log(valueSelected);
    console.log(textSelected);
});

$('select').change(function () {
    var optionSelected = $(this).find("option:selected");
    var valueSelected  = optionSelected.val();
    var textSelected   = optionSelected.text();
});

Using this function I can get the project name after it's been selected if I call it specifically during program flow:

function getSelectedProjectName(){
    var projectName = $("#jiraProjectsList").find(":selected").text();
    console.log(projectName);
}

Question:

How do I fire a change event on a dynamically created option / select when a user makes a choice?

Answer: (from SO thread this was marked a duplicate of):

$(document).on('change', '#jiraProjectsList', function(){
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    console.log(optionSelected);
    console.log(valueSelected);
});