事件委托问题jQuery

Question

我有以下代码，第一个HTML代码段是在初始页面加载时加载的，然后，当单击带有id的span标志时，javascript会将第二个HTML代码段加载到网页上的隐藏div中。

现在，此隐藏的div具有一个选择下拉框，当更改javascript时，它应该进行另一个AJAX调用，但从未调用$("#overlay #innerWrapper #country").on('change', function() {。

我确定这是一个事件委托问题，但似乎看不到我要去哪里错了？？

Javascript

$("#topBar").on("click", "#flag", function(e) {
    e.preventDefault();

    var data = {};

    $("#overlay").css("display", "inline");

    // Country Change
    $("#overlay #innerWrapper #country").on('change', function() {
        var country = $(this).val();

        ajaxCall(country);
    });

    ajaxCall(data);

    e.stopPropagation();
});

页面加载时加载（代码段1）

<div id="topBar">
    <span id="flag" class="flag-icon"></span>
</div>

通过AJAX查询加载（代码段2）

<div id="innerWrapper">
    <div id="title">Select Country</div>
    <span id="flag" class="flag-icon"></span>
    <select id="country" name="country">
        <option value="fr" selected="selected">&nbsp;France</option>
        <option value="de">&nbsp;Germany</option>
    </select>
</div>

更新1：

$("#innerWrapper").on('change', '#country', function() {
    alert('1');
    var country = $(this).val();

    ajaxCall(country);
});

$("#topBar").on("click", "#flag", function(e) {
    e.preventDefault();

    var data = {};

    $("#overlay").css("display", "inline");

    ajaxCall(data);

    e.stopPropagation();
});

function ajaxCall(element, callId, dataIn)
{
    var limit;
    var data;
    if ($(element).data("limit")) {
        limit = $(element).data("limit");
        data = {id: callId, limit: limit, data: dataIn};
    }
    data = {id: callId, data: dataIn, element: element};

    $.ajax(
    {
        type: "POST",
        url: "ajax.php",
        data: data,
        beforeSend: function ()
        {
            if (element != 'ignore') {
                $(element).append( "<div class=\"loading\"></div>");
            }
        },
        success: function (data)
        {
            if (element != 'ignore') {
                $(element).html(data);
            } else {
                location.reload(true);
            }
        },
        complete: function ()
        {
            if (element != 'ignore') {
                $(element).siblings(".loading").remove();
            }
        },
        error: function (jqXHR)
        {
            $(element).html(jqXHR.status + " - " + jqXHR.statusText);
        }
    });
}