Jquery bei Änderung nicht für dynamischen Inhalt ausgelöst

Question

Ich versuche, eine Kaskade Dropdown mit allen dynamischen Elementen zu erstellen.

Meine Html:

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

Ich habe 2 Funktionen Elemente laden Ajax, beide arbeiten gut:

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

     }); 
    } 

Ich brauche GetSectors auf der Standortauswahl basierend zu nennen. Ich habe dies:

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

     GetSites(); 
    }); 

Aber es funktioniert nicht. Ich benutze jquery 1.8.3.

Irgendeine Idee wo ist das Problem?

Vielen Dank!

Answer 1

Versuchen Ereignis Delegation:

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

Das Sprudeln Verhalten der Ereignisse ermöglicht es uns, "Ereignis Delegation" zu tun - Bindung Handler High-Level-Elemente, und dann das den Nachweis eines Low- Level-Element initiiert das Ereignis.

Die Delegierung von Ereignissen hat zwei Hauptvorteile. Erste, es erlaubt uns, binden weniger Event-Handler als wir binden müssten, wenn wir Klicks auf einzelne Elemente zu hören waren, die eine große Leistungssteigerung sein kann. Zweite, es erlaubt uns, binden an übergeordnete Elemente - wie eine ungeordnete Liste - und wissen, dass unsere Event-Handler wird Feuer, wie erwartet, auch wenn den Inhalt dieses übergeordneten Elements ändern.

von Genommen: http://jqfundamentals.com/chapter/events

Tragene Ereignisse haben den Vorteil, dass sie Ereignisse aus Nachkommen Elementen verarbeiten können, die auf das Dokument zu einem späteren Zeitpunkt hinzugefügt werden. Durch die Auswahl eines Elements, das zum Zeitpunkt des Delegierens des delegierten Ereignishandlers garantiert vorhanden ist, können Sie mithilfe delegierter Ereignisse vermeiden, dass Ereignishandler häufig angehängt und entfernt werden müssen. Dieses Element könnte beispielsweise das Containerelement einer Ansicht in einem Model-View-Controller-Design sein oder dokumentieren, wenn das Ereignis Handler alle Bubbling-Ereignisse im Dokument überwachen möchte. Das Dokumentelement ist im Kopf des Dokuments verfügbar, bevor einen anderen HTML-Code geladen werden kann, , so dass Ereignisse ohne dort angehängt werden können, bis das Dokument fertig ist.

von Genommen: http://api.jquery.com/on/