DB liste générée ne fonctionne pas lors de sa création en utilisant jquery

Question

I ai une forme simple qui a une liste (liste déroulante générée à partir d'un DB), lorsqu'un utilisateur effectue une sélection, la sélection est imprimé sur l'écran. Le problème que je vais avoir est que si j'utilise jquery pour appeler le php funciton qui génère la liste lorsque le chargement, la liste ne fonctionnera pas, mais si j'ajouter le code directement dans le code HTML, il fonctionnera
< br> Lorsque la page charge la liste déroulante est appelée comme ceci:

$('#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 liste est générée avec id = 'CatégorieListe' , et il est correctement ajouté au createDropDown DIV appelé "createDropDown". Jusqu'à présent, tout semble bon! Le problème vient quand une sélection est faite sur la liste nouvellement créée (CatégorieListe) un autre Jquery est appelée

lorsqu'une sélection est effectuée le code suivant doit être appelé:

$('#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 (sélectionné); imprime l'élément sélectionné sur l'écran. mais ne fonctionne pas.

NOTE: Cela fonctionne bien si j'appelle la fonction php pour générer directement le menu déroulant dans le fichier main.html, donc je sais que la liste est générée avec le code correct et cela fonctionne, mais quand je l'utilise Jquery pour appeler la méthode php de la charge, il ne fonctionne pas ... et je ne comprends pas pourquoi.

PS Je suis un noob de Jquery si une idée serait la bienvenue!

---

Mise à jour:

J'ai essayé de créer une reliure après la liste est générée comme ceci:

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

où categoryList0 est l'ID de la nouvelle liste. la classe de la liste est CatégorieListe

mais je suis toujours bloqué, car il est toujours pas entrer dans la fonction quand il y a un changement ...

Answer 1

Votre deuxième extrait de code trouve tous les éléments qui correspondent à #categoryList et lie une fonction à l'événement de changement. Le problème est qu'il n'y a aucun élément de #categoryList à ce moment-là, puisque vous créez plus tard. Ainsi, vous devez faire la liaison après que la liste a été créée.

Answer 2

J'ai trouvé un moyen de faire une liaison à l'aide plus tard xajax. Pour une raison nulle part dans le fichier jquery j'ai pu lier cette fonction avec la nouvelle liste déroulante. Ma solution a été d'ajouter le scrip jquery en utilisant xajaxResopnse-> addScript (script) dans le addDropdownMenu funciton comme ceci

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

}

faire d'abord une liaison pour la nouvelle liste comme ceci $ ( '# CatégorieListe') se lient. ( 'Changement', la fonction categoryListChange () {...} puis  ajouter le script jquery par $ xajaxResponse-> addScript ($ javascript).