jqueryを使用して作成したときにDB生成リストが機能しない

Question

リストを持つシンプルなフォーム（DBから生成されたドロップダウンリスト）をユーザが選択すると、その選択が画面に表示されます。私が持っている問題は、jQueryを使って、ページがロードされているときにリストを生成するphp関数を呼び出すと、リストは機能しませんが、htmlでコードを直接追加すれば正常に動作します。

ページのドロップダウンリストは、このように呼ばれてロードします。

 

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

}); 

リストID =「categoryList」で生成され、それが「createDropDown」と呼ばれるcreateDropDown DIVに正しく追加されます。今まですべてがよさそうだよ！選択が新たに作成されたリスト（categoryList）に行われたとき 問題は、選択が行われたときに、次のコードが呼び出されるべき別のjQueryを

と呼ばれています：

 

$('#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（選択します）;は、選択した項目を画面に表示します。しかし働いていない。

注：これは正常に動作します。私はphp関数を呼び出してmain.htmlファイルに直接ドロップダウンを生成するので、リストが正しいIDで生成されていることがわかりますが、動作しますが、Jqueryを使用するとphpメソッドを呼び出して呼び出すと、うまくいきません。なぜか分かりません。

PS私はJqueryのノブですので、いくつかの洞察力は大歓迎です！

---

UPDATE：categoryList0は、新しいリストのIDある

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

：

私は、リストがこのように生成された後に結合を作成してみました。リストのクラスcategoryList

ですが、変更があった場合、それはまだ機能になっていないので、私はまだこだわって...

Answer 1

あなたの2番目のコードスニペットは、#categoryListに一致するすべての要素を検索し、関数をchangeイベントにバインドします。問題は、後で作成するため、その時点で#categoryList要素が存在しないことです。したがって、リストが作成された後でバインディングを行う必要があります。

Answer 2

後でxajaxを使ってバインディングを行う方法が見つかりました。何らかの理由で、jqueryファイルのどこにも、この関数を新しいドロップダウンとバインドすることができませんでした。私のソリューションは、この

機能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; 

} 

は、最初に新しいリストのバインドを行うようaddDropdownMenu funcitonでxajaxResopnse-> addScript（スクリプト）を使用してjqueryのスクリップを追加しました。

;。この $（ '＃のcategoryList'）バインド（ '変更'、関数categoryListChange（）{...} 、その後 $ xajaxResponse-> addScript（$ジャバスクリプト）を介してjqueryのスクリプトを追加するなどの