DB lista generada no funciona cuando se crean usando jQuery

Question

Tengo una forma sencilla que tiene una lista (lista desplegable generado a partir de un DB), cuando un usuario realiza una selección, la selección se imprime en la pantalla. El problema que estoy teniendo es que si uso jQuery para llamar a la Funciton PHP que genera la lista cuando se carga la página, la lista no va a funcionar, pero si añado el código directamente en el html que funcionará
< br> Cuando la página se carga la lista desplegable se llama así:

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


});

la lista es generada con la id = 'categoryList' , y se anexa correctamente a la createDropDown DIV llamado "createDropDown". Hasta ahora todo se ve bien! El problema viene cuando se realiza una selección en la lista recién creada (categoryList) Jquery otra se llama

cuando se hace una selección el siguiente código debe ser llamado:

$('#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 (seleccionado); imprime el elemento seleccionado en la pantalla. pero no está trabajando.

NOTA: Esto funciona bien si llamo a la función de PHP para generar el menú desplegable directamente en el archivo principal.html, así que sé que la lista se genera con el codigo correcto y funciona, pero cuando se utiliza jQuery para llamar el método php en la carga, que no funciona ... y yo no entiendo por qué.

PS Soy un novato de Jquery por lo que una idea sería muy bienvenido!

---

ACTUALIZACIÓN:

He intentado crear una unión después de que se ha generado la lista como esta:

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

donde categoryList0 es el ID de la nueva lista. la clase de la lista es categoryList

pero todavía estoy atascado, ya que todavía no está entrando en la función cuando hay un cambio ...

Answer 1

Su segundo fragmento de código busca todos los elementos que coinciden con #categoryList y se une una función para el evento de cambio. El problema es que no hay ningún elemento #categoryList en ese momento, ya que se crea más adelante. Así que tiene que hacer la unión después de que la lista se ha creado.

Answer 2

He encontrado una manera de hacer un xajax vinculante después de usarlo. Por alguna razón en ninguna parte del archivo de jQuery yo era capaz de unirse a esta función con el nuevo menú desplegable. Mi solución fue añadir el scrip jQuery usando xajaxResopnse-> addScript (script) en el addDropdownMenu Funciton como esto

Función 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;  

}

primero haciendo un aprieto para la nueva lista como esta $ ( '# categoryList'). Bind ( 'cambio', categoryListChange function () {...} y entonces  la adición de la secuencia de comandos a través de jQuery $ xajaxResponse-> addScript ($ Javascript);.