Сгенерированный список БД не работает при создании с помощью jquery

I have a simple form that has a list (dropdown list generated from a DB), when a user makes a selection, the selection is printed on the screen. The problem I'm having is that if I use jquery to call the php funciton that generates the list when the page is loading, the list will not work, but if I add the code directly in the html it will work

When the page loads the dropdown list is called like this:


$('#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' и правильно добавляется в DIV createDropDown под названием "createDropDown". Пока все выглядит хорошо! Проблема возникает, когда во вновь созданном списке (categoryList) делается выбор, вызывается другой Jquery

when a selection is made the following code should be called:


$('#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(selected); prints the selected item on the screen. but is not working.

ПРИМЕЧАНИЕ. Это работает нормально, если я вызываю функцию php для создания раскрывающегося списка непосредственно в файле main.html, поэтому я знаю, что список создается с правильным идентификатором, и он работает, но когда я использую Jquery для вызова метода php при загрузке не работает... и я не понимаю почему.

PS Я новичок в Jquery, поэтому некоторые идеи будут очень кстати!

ОБНОВИТЬ:

Я попытался создать привязку после того, как список сгенерирован следующим образом:

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

где categoryList0 — идентификатор нового списка. класс списка - categoryList

но я все еще застрял, потому что он все еще не входит в функцию, когда есть изменение...


javascript drop-down-menu jquery select xajax
person Onema    schedule 12.08.2009    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Ваш второй фрагмент кода находит все элементы, соответствующие #categoryList, и привязывает функцию к событию изменения. Проблема в том, что в это время нет элемента #categoryList, так как вы создадите его позже. Таким образом, вам нужно сделать привязку после того, как список был создан.

person svinto    schedule 12.08.2009
comment
и как мне это сделать? как я могу создать привязку после создания списка? - person Onema; 12.08.2009
comment
Вам нужно подключиться к xajax и запустить код во втором фрагменте после добавления списка. Поскольку я не знаю xajax, я не могу сказать вам, как это сделать. - person svinto; 12.08.2009

arrow_upward
0
arrow_downward

Я нашел способ сделать привязку позже, используя xajax. По какой-то причине нигде в файле jquery я не смог связать эту функцию с новым раскрывающимся списком. Мое решение состояло в том, чтобы добавить скрипт jquery, используя xajaxResopnse->addScript(script) в функции addDropdownMenu, подобной этой

функция 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);.

person Onema    schedule 13.08.2009