事件委派问题jQuery

我有下面的代码,第一个HTML片段在初始页面加载时被加载,然后当点击span with id标志时,javascript将第二个HTML片段加载到网页上的一个隐藏div中。

现在这个隐藏的div有一个select下拉框,当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);
        }
    });
}