JQuery did not change dynamic content

Question

I am trying to create a cascading dropdown with all the 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 for loading items using ajax, both work 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 site selection. I have it:

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

But that will not work. I am using jquery 1.8.3.

Any idea where the problem is?

Thanks!

Answer 1

Try Event Delegation :

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

The rugged behavior of events allows us to "delegate events" - binding handlers to high-level elements, and then detecting a low-level element triggered an event.

The delegation event has two main advantages. First , it allows us to bind fewer event handlers than we would have to bind if we listened to clicks on individual elements, which can be a big performance boost . Second , it allows you 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 this parent element change.

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

Delegated events have the advantage that they can handle events from descendant elements that will be added to the document later. From selecting the item that is guaranteed to be present during the delegated event handler, you can use delegated events to avoid frequently attaching and removing event handlers. . the element can be an element of the presentation container in the Model-View-Controller, for example, or a document if the event handler wants to control all the bubble events in the document. The document element is available at the beginning of the document before loading any other HTML , therefore it is safe to attach events there without waiting for the document to be ready.

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

Answer 2

I had the same issue with the change anchor function for dynamically added content. I solved this with this. Hope this helps someone ^^

 $(".select_class").live("change", function(){ console.log("testing..."); });