1

リスト（DBから生成されたドロップダウンリスト）を持つ単純なフォームがあります。ユーザーが選択を行うと、選択内容が画面に出力されます。私が抱えている問題は、ページの読み込み時にリストを生成するphp関数をjqueryを使用して呼び出すと、リストが機能しないことですが、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」と呼ばれるcreateDropDownDIVに正しく追加されます。今まですべてがよさそうだ！問題は、新しく作成されたリスト（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の初心者なので、洞察を歓迎します。

アップデート：

リストが次のように生成された後、バインディングを作成してみました。

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

ここで、 categoryList0は新しいリストのIDです。リストのクラスはcategoryListです

しかし、変更があったときにまだ機能に入っていないので、私はまだ立ち往生しています...

4

2 に答える 2

1

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

于 2009-08-12T18:10:45.623 に答える
0

後で xajax を使用してバインディングを行う方法を見つけました。何らかの理由で、jquery ファイルのどこにもこの関数を新しいドロップダウンにバインドできませんでした。私の解決策は、このようにaddDropdownMenu 関数で xajaxResopnse->addScript(script) を使用して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;  

}

最初に$('#categoryList').bind('change',function categoryListChange() {...} のように新しいリストのバインドを行い、次に$xajaxResponse->addScript($javascript); を介して jquery スクリプトを追加します。 .

于 2009-08-13T16:46:02.927 に答える