0

I have the below code, the first HTML snippet is loaded on the initial page load, then when the span with id flag is clicked the javascript will load the second HTML snippet into a hidden div on the webpage.

Now this hidden div has a select drop down box which when changed the javascript should make another AJAX call but $("#overlay #innerWrapper #country").on('change', function() { is never called.

I'm sure it's an event delegation issue but can't seem to see where I'm going wrong!?

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();
});

Loaded on page load (snippet 1)

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

Loaded via a AJAX query (snippet 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>

Update 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);
        }
    });
}
llanato
  • 2,508
  • 6
  • 37
  • 59
  • 2
    why are you binding it on click? You would end up adding multiple event handlers... Outside the click just bind `$('#innerWrapper').on('change', '#country', function() {})` – epascarello Jan 31 '19 at 13:11
  • try binding event with document `$(document).on('change', "#overlay #innerWrapper #country", function(){...})` – anees Jan 31 '19 at 13:19
  • @epascarello, spent so long looking at it never noticed I was binding it on click, I've added my updated code, still not working, in the browser console I'm not seeing any event bound on the `#country` element, i can see all the other events in the console though. – llanato Jan 31 '19 at 13:27
  • well if #inline is also dynamically added than it is still not going to work Hard to tell since what I see from the code it should work. How is the script added to the page? Why do you have more than one item with the same id? – epascarello Jan 31 '19 at 13:30
  • @epascarello, I've updated the code as I have it now, there are no duplicate element names, the AJAX function is above now, all the javascript is loaded on page load as it `snippet 1`, `snippet 2` is loaded from a response on an AJAX call from `$("#topBar").on("click", "#flag", function(e) {`. – llanato Jan 31 '19 at 13:40
  • @epascarello, I managed to get it working by including the javascript file containing the required jquery and functions into the HTML loaded by the AJAX call in `snippet 2`, it's not ideal to have the javascript loaded in the main page and then the overlay but it's a work around for now that works. – llanato Jan 31 '19 at 17:31

0 Answers0