DB generierte Liste funktioniert nicht, wenn Jquery erstellt mit

Question

Ich habe eine einfache Form, die eine Liste (Dropdown-Liste von einem beliebigen DB generiert) hat, wenn ein Benutzer eine Auswahl trifft, wird die Auswahl auf dem Bildschirm ausgegeben. Das Problem, das ich habe, ist, dass, wenn ich jQuery verwenden, um die PHP-funciton aufzurufen, die die Liste erzeugt, wenn die Seite geladen wird, wird die Liste nicht, aber wenn ich den Code direkt in den HTML-Code hinzufügen, wird es funktionieren
< br> Wenn die Seite lädt die Drop-Down-Liste wie folgt aufgerufen:

$('#createDropDown').ready(function(){
        id = $('#createDropDown').val(); 
        // this calls a php function that creates a dropdown list from the DB
        // the dropdown's id = 'categoryList'
        xajax_addDropdownMenu(id);


});

die Liste erzeugt wird mit dem id = 'Category' , und es angehängt wird korrekt an die createDropDown DIV namens "createDropDown". Bis jetzt sieht alles gut! Das Problem kommt, wenn eine Auswahl auf der neu erstellten Liste (Category) eine weitere Jquery aufgerufen gemacht wird

, wenn eine Auswahl der folgende Code gemacht wird, sollte aufgerufen werden:

$('#categoryList').change(function() {
    bucket_id = $('#categoryList').val(); 
    var selected = "";
    // get selected value from the dropdown menu
        $("#categoryList option:selected").each(function () {
            selected += $(this).text() + " ===>";
         });
        // if we have a valid ID print it in the screen.
        if(bucket_id!= 0)
        {
            xajax_addCategory(selected);
        }
     });

xajax_addCategory (ausgewählt); druckt das ausgewählte Element auf dem Bildschirm. aber nicht funktioniert.

Hinweis: Dies funktioniert OK, wenn ich die PHP-Funktion ruft Sie die Drop-Down-direkt in der main.html-Datei zu erzeugen, damit ich weiß, dass die Liste mit der korrekten ID erzeugt wird, und es funktioniert, aber wenn ich JQuery verwenden anrufen die pHP-Methode auf Last, funktioniert es nicht ... und ich verstehe nicht, warum.

PS Ich bin ein Noob von JQuery so würden einige Einsicht sehr willkommen!

---

UPDATE:

Ich habe versucht, die Schaffung einer Bindung, nachdem die Liste wie folgt erzeugt wird:

 
$('#createDropDown').ready(function()
    { 
        id = $('#createDropDown').val();  
        xajax_addDropdownMenu(id); 
        $("#categoryList0").bind('change',function() 
        { 
            console.log('The code goes here!!'); 
        }); 
    }); 
 

Dabei steht categoryList0 ist die ID der neuen Liste. die Klasse der Liste ist Category

, aber ich bin immer noch stecken, weil es noch nicht in die Funktion bekommen, wenn es eine Änderung gibt ...

Answer 1

Ihr zweiter Codeausschnitt findet alle Elemente, die #categoryList und bindet eine Funktion für das Änderungsereignis entsprechen. Das Problem ist, dass es zu diesem Zeitpunkt kein #categoryList Element ist, da Sie es später erstellen. So müssen Sie die Bindung tun, nachdem die Liste erstellt wurde.

Answer 2

Ich fand einen Weg, um eine Bindung später mit xajax zu tun. Aus irgendeinem Grunde nirgends in der jQuery-Datei herunter diese Funktion mit der neuen Drop binden, konnte ich. Meine Lösung war die jquery Scrip mit xajaxResopnse-> addScript (Skript) in der addDropdownMenu funciton wie folgt

hinzufügen

Funktion addDropdownMenu ($ id) {

  $xajaxResponse = new xajaxResponse();

  $html = /* CODE TO GENERATE LIST HERE */ ; 


  $javascript = /*"*///commented out " to visualize code better
    $('#categoryList').bind('change',function categoryListChange() 
    {
     
      //get selected value from the dropdown menu
      var selected = "";
      $("#categoryList option:selected").each(function () 
      {
        selected += $(this).text();
       });

      bucketId = $('#categoryList').val(); 

      if(bucketId!= 0)
      {
        xajax_addCategory(selected);
      }

    });"";

  $xajaxResponse->addAppend("categoryListContainer", "innerHTML", $html);

  $xajaxResponse->addScript($javascript);

  return $xajaxResponse;  

}

zunächst eine Bindung für die neue Liste zu tun wie dieses $ ( '# Category'). Bind ( 'change', function categoryListChange () {...} und dann  Hinzufügen des jquery Skript durch $ xajaxResponse-> addScript ($ Javascript).