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

Question

У меня есть простая форма, в которой есть список (выпадающий список, созданный из базы данных), когда пользователь делает выбор, выбор печатается на экране.Проблема, с которой я сталкиваюсь, заключается в том, что если я использую 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 = 'Список категорий', и он правильно добавляется к createDropDown DIV под названием "createDropDown".До сих пор все выглядит хорошо!Проблема возникает, когда делается выбор во вновь созданном списке (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 файл, поэтому я знаю, что список генерируется с правильным идентификатором, и это работает, но когда я использую 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

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

Answer 1

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

Answer 2

Я нашел способ сделать привязку позже, используя xajax.По какой-то причине нигде в файле jquery я не смог связать эту функцию с выпадающим списком new.Мое решение состояло в том, чтобы добавить скрипт jquery с помощью xajaxResopnse->addScript (скрипт) в 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('изменить',функция categoryListChange() {...} и затем добавление скрипта jquery через $xajaxResponse->Добавить скрипт($javascript);.