Вопрос делегирования события jQuery - PullRequest
Новая
       13

Вопрос делегирования события jQuery

0 голосов
/ 31 января 2019

У меня есть приведенный ниже код, первый фрагмент HTML загружается при начальной загрузке страницы, затем при щелчке по диапазону с идентификатором 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);
        }
    });
}
...