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

StackOverflow https://stackoverflow.com/questions/1267764

質問

リスト (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 = 'カテゴリリスト', 、「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 の初心者なので、洞察があれば大歓迎です。

アップデート：

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

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

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

しかし、変更があったときにまだ関数に反映されていないため、まだ行き詰まっています...

役に立ちましたか？

解決

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

他のヒント

後で xajax を使用してバインディングを行う方法を見つけました。何らかの理由で、jquery ファイルのどこにもこの関数を新しいドロップダウンにバインドできませんでした。私の解決策は、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() {...} そして、jqueryスクリプトを追加します $xajaxResponse->addScript($javascript);.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top