Невозможно выбрать значение из выпадающего меню при выборе

Question

Я использую PHP и JQuery (и BootstrapCSS), чтобы заполнить два раскрывающихся меню файлами в определенной папке/подпапке. Первое выпадающее меню отображает файлы InThe конкретного пути:

/Code/(all the files here) 

И второе выпадающее меню получает заполняется через вызов AJAX и PHP скрипт. Это часть кода: Изначально я все папки, расположенные в указанном пути и добавить их в раскрывающемся меню (это работает):

<ul id="dropdown-menu-id_scn" class="dropdown-menu" role="menu"> 
    <?php            foreach(glob("Code/python/output/Scenarios/*") as $filename){ 
    // GET INDEX 
    $pos = strpos($filename, 'Scenarios/'); 
    // GET SUBSTRING WITH SHAPE NAME 
    $rest = substr($filename, $pos+10); 
    echo "<li class='demolist_scn'><a href=>".$rest."</a></li>"; 
    }?> 
</ul> 

Тогда Я использую на функции мыши, чтобы получить все файлы в подкаталоге на основе выбора выше генерируемой выпадающего меню:

$(document).ready(function(){ 
     $('.demolist_scn').on('click', function(){ 
      var scenarioName = $(this).find("a").text(); // GET THE VALUE OF DROPDOWN MENU 
      $("#dropdown-menu-id_scn").dropdown("toggle"); // CLOSE THE DROPDOWN MENU AFTER SELECTION 
     var path = 'Code/python/output/Scenarios/'+scenarioName+'/*.shp'; 
      // ajax request which will return all the files in the subfolder 
      $.ajax({ 
       type:'POST', 
       url:'populate_shapes_dropdown.php', 
       data: {path:path}, 
       success:function(response){ 
        $("#dropdown-menu-id").html(response); 
       } 
      }); 
      return false; // prevents refreshing page 
     }); 
    }); 

И это PHP скрипт:

<?php 
ini_set('display_errors', 1); 
$path = $_POST['path']; 
echo($path); 
foreach(glob($path) as $filename){ 
    // GET INDEX 
    $pos = strpos($filename, 'Scenarios/'); 
    //echo ($filename); 
    // GET SUBSTRING WITH SHAPE NAME 
    $rest = substr($filename, $pos+21); 
    echo $options="<li class='demolist'><a href='#'>".$rest."</a></li>";        
} 
?> 

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

<ul id="dropdown-menu-id" class="dropdown-menu" role="menu"> 
    <?= $options?> 
</ul> 

И теперь возникает вопрос. Когда я пытаюсь выбрать одно из значений во втором раскрывающемся меню, ничего не происходит. Хотя я добавил этот OnClick событие:

$(document).ready(function(){ 
     $('.demolist').on('click', function(){ 
      alert('something'); 
}); 

Что я здесь отсутствует? Это должно быть что-то просто, я ошибаюсь, но я не вижу этого.

Answer 1

Ну, для начала.

Это:

$('demolist').on('click', function(){ 

Должно быть так:

$('.demolist').on('click', function(){ //note the dot referring to a class 

Для динамически добавляемых элементов, возможно, однако необходимо делегировать им делать что-то вроде этого. Ссылка: http://api.jquery.com/on/

$('.dropdown-menu').on('click','.demolist', function() {