Question

I’m trying to create a cascade dropdown with all dynamic elements.

My Html:

 <select id="Sites" name="SelectedSiteId"><option value=""></option></select>
 <select id="Sectors" name="SelectedSectorId"><option value=""></option></select>

I have 2 functions to load elements using ajax, both working fine:

function GetSites() {
        $.ajax({
            url: '/Sites/GetSites',
            dataType: "json",
            type: "POST",
            error: function () {
                alert("An error ocurred.");
            },
            success: function (data) {
                var items = "";
                $.each(data, function (i, item) {
                    items += "<option value=\"" + item.Value + "\">" + item.Text + "</option>";
                });
                $("#Sites").html(items);
            }
        });
    }

    function GetSectors(siteId) {
        $.ajax({
            url: '/Sites/GetSectors',
            data: { siteId: siteId },
            dataType: "json",
            type: "POST",
            error: function () {
                alert("An error ocurred.");
            },
            success: function (data) {
                var items = "";
                $.each(data, function (i, item) {
                    items += "<option value=\"" + item.Value + "\">" + item.Text + "</option>";
                });
                $("#Sectors").html(items);
            }

        });
    }

I need to call GetSectors based on the Site selection. I have this:

$(document).ready(function () {                       
        $("#Sites").on("change", function (e) {
            var siteId = $("#Sites").val();
            GetSectors(siteId);                
        });

        GetSites();
    });

But it doesn’t work. I’m using jquery 1.8.3.

Any Idea where is the problem?

Thank you!

Answer 1

Try Event Delegation:

$(document).on("change", "#Sites", function(){
    var siteId = this.value;
    GetSectors(siteId);  
});

The bubbling behavior of events allows us to do “event delegation” —
binding handlers to high-level elements, and then detecting which
low-level element initiated the event.

Event delegation has two main benefits. First, it allows us to bind
fewer event handlers than we’d have to bind if we were listening to
clicks on individual elements, which can be a big performance gain.
Second, it allows us to bind to parent elements — such as an unordered
list — and know that our event handlers will fire as expected even if
the contents of that parent element change.

Taken from: http://jqfundamentals.com/chapter/events

Delegated events have the advantage that they can process events from
descendant elements that are added to the document at a later time. By
picking an element that is guaranteed to be present at the time the
delegated event handler is attached, you can use delegated events to
avoid the need to frequently attach and remove event handlers. This
element could be the container element of a view in a
Model-View-Controller design, for example, or document if the event
handler wants to monitor all bubbling events in the document. The
document element is available in the head of the document before
loading any other HTML, so it is safe to attach events there without
waiting for the document to be ready.

Taken from: http://api.jquery.com/on/