DB lista gerada não funciona quando criado usando jquery

Question

Eu tenho um formulário simples que tem uma lista (lista suspensa gerado a partir de um DB), quando um usuário faz uma seleção, a seleção é impresso na tela. O problema que estou tendo é que se eu usar jquery para chamar a funciton php que gera a lista quando a página está carregando, a lista não vai funcionar, mas se eu adicionar o código diretamente no html que vai funcionar
< br> Quando a página é carregada na lista suspensa é chamada como esta:

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


});

A lista é gerada com o id = 'categoryList' , e é anexado corretamente ao createDropDown DIV chamado "createDropDown". Até agora tudo parece bom! O problema surge quando uma seleção é feita na lista recém-criada (categoryList) outra Jquery é chamado

quando uma seleção é feita o seguinte código deve ser chamado:

$('#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 (selecionado); imprime o item selecionado na tela. mas não está funcionando.

NOTA: Isso funciona bem se eu chamar a função php para gerar o menu suspenso diretamente no arquivo main.html, então eu sei que a lista está sendo gerado com o ID correto e ele funciona, mas quando eu uso jQuery para chamada o método php na carga, ele não funciona ... e eu não entendo por que.

PS Eu sou um noob de Jquery de modo algum insight seria muito bem-vindo!

---

UPDATE:

Eu tentei criar uma ligação após a lista é gerada como esta:

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

que categoryList0 é o ID da nova lista. a classe da lista é categoryList

mas eu ainda estou preso porque ele ainda não está metendo a função quando há uma mudança ...

Answer 1

O segundo trecho de código localiza todos os elementos que correspondem #categoryList e liga-se uma função para o evento de alteração. O problema é que não há nenhum elemento #categoryList naquele tempo, desde que você criá-lo mais tarde. Assim que você precisa fazer a ligação depois que a lista foi criada.

Answer 2

Eu encontrei uma maneira de fazer uma xajax ligação mais tarde usando. Por alguma razão, em nenhum lugar do arquivo jquery eu era capaz de ligar esta função com o novo drop-down. Minha solução foi adicionar o scrip jquery usando xajaxResopnse-> addScript (roteiro) no addDropdownMenu funciton como este

função 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;  

}

primeiro a fazer um ligamento para a nova lista como esta $ ( '# categoryList'). Bind ( 'mudança', categoryListChange function () {...} e depois adicionando o script jquery através de $ xajaxResponse-> addScript ($ javascript);.