DB generierte Liste funktioniert nicht, wenn erstellt mit jquery

Question

Ich habe ein einfaches Formular, das eine Liste hat (Dropdown-Liste aus einer DB generiert), wenn ein Benutzer eine Auswahl trifft, wird die Auswahl auf dem Bildschirm gedruckt. Das Problem, das ich habe, ist, dass, wenn ich jquery verwende, um die php funciton aufzurufen, die die Liste erzeugt, wenn die Seite geladen wird, die Liste nicht funktioniert, aber wenn ich den Code direkt in dem HTML hinzufüge, wird es funktionieren

Wann 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 wird erzeugt mit dem id = ‚Category‘, und es wird korrekt aufgerufen an dem createDropDown DIV angehängt „createDropDown“. Bis jetzt sieht alles gut aus! Das Problem kommt, wenn eine Auswahl auf der neu erstellten Liste (Category) eine weitere Jquery

genannt wird ist

, 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 Objekt auf dem Bildschirm. aber funktioniert nicht.

HINWEIS: Das funktioniert OK, wenn ich die PHP-Funktion aufrufen, um das Dropdown direkt in der Datei main.html zu generieren, so weiß ich, dass die Liste mit der richtigen ID generiert wird und es funktioniert, aber wenn ich Jquery verwenden rufe die php-Methode beim Laden auf, es funktioniert nicht ... und ich verstehe nicht warum.

PS Ich bin ein Neuling von Jquery, also ein Einblick wäre sehr willkommen!

---

UPDATE:

Ich habe versucht, eine Bindung zu schaffen, nachdem die Liste wie folgt generiert:

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

wo 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

Ihren zweiten Codeausschnitt findet alle Elemente, die #categoryList entsprechen und bindet eine Funktion an das Änderungsereignis. Das Problem ist, dass es zu diesem Zeitpunkt kein #categoryList-Element gibt, da Sie es später erstellen. Daher müssen Sie die Bindung nach dem Erstellen der Liste durchführen.

Answer 2

Ich fand einen Weg, um eine Bindung später mit Xajax zu tun. Aus irgendeinem Grund konnte ich diese Funktion in der jquery-Datei nicht mit dem neuen Drop-down verbinden. Meine Lösung war die jquery Scrip mit xajaxResopnse-> addScript (Skript) im addDropdownMenu funciton wie diese

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; 

} 

zuerst tun eine Bindung für die neue Liste hinzufügen . ähnliche $ ('# Category') binden ('Veränderung', Funktion categoryListChange() {...} und dann die jquery Skript Zugabe durch $ xajaxResponse-> addScript ($ Javascript).