javascript - 事件委托问题 jQuery

Question

我有下面的代码，第一个 HTML 片段在初始页面加载时加载，然后当单击带有 id 标志的跨度时，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);
        }
    });
}

标签： javascriptjqueryajaxevent-delegation