DB elenco generato non funziona al momento della creazione utilizzando jQuery

Question

Ho una forma semplice che ha una lista (elenco a discesa generato da un DB), quando un utente effettua una selezione, la selezione viene stampato sullo schermo. Il problema che sto avendo è che se uso jQuery per chiamare il funciton php che genera l'elenco quando la pagina viene caricata, l'elenco non funzionerà, ma se aggiungo il codice direttamente nel codice HTML che funzionerà
< br> Quando la pagina viene caricato l'elenco a discesa è chiamata in questo modo:

$('#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);


});

l'elenco viene generato con il id = 'CategoryList' , e aggiunti correttamente al createDropDown DIV chiamato "createDropDown". Finora tutto sembra a posto! Il problema nasce quando viene effettuata una selezione sulla lista appena creata (CategoryList) un altro jQuery è chiamato

quando viene effettuata una selezione il seguente codice dovrebbe essere chiamato:

$('#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 (selezionato); stampa l'elemento selezionato sullo schermo. ma non funziona.

Nota: Questo funziona bene se io chiamo la funzione PHP per generare la discesa direttamente nel file main.html, quindi so che l'elenco viene generato con l'ID corretto e funziona, ma quando uso jQuery per chiamare il metodo php sotto carico, non funziona ... e non capisco perché.

PS Sono un noob di jQuery così una certa comprensione sarebbe molto gradito!

---

UPDATE:

Ho cercato di creare un legame dopo l'elenco viene generato in questo modo:

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

dove categoryList0 è l'ID del nuovo elenco. la classe della lista è CategoryList

ma sto ancora bloccato perché non è ancora sempre in funzione quando c'è un cambiamento ...

Answer 1

Il secondo frammento di codice trova tutti gli elementi che corrispondono #categoryList e lega una funzione per l'evento di modifica. Il problema è che non v'è alcun elemento #categoryList in quel momento, poiché si crea in seguito. Quindi è necessario fare il binding dopo l'elenco è stato creato.

Answer 2

Ho trovato un modo per fare un xajax vincolante in seguito utilizzando. Per qualche motivo nessuna parte nel file jquery sono stato in grado di legare questa funzione con la nuova discesa. La mia soluzione era quella di aggiungere lo scrip jquery utilizzando xajaxResopnse-> addScript (copione) nel addDropdownMenu funciton come questo

funzione 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;  

}

prima di fare una legatura per il nuovo elenco come questo $ ( '# CategoryList'). Bind ( 'cambiamento', la funzione categoryListChange () {...} e poi  aggiungendo lo script jquery tramite $ xajaxResponse-> addScript ($ javascript);.