无法从选择的下拉菜单中选择值

Question

I use PHP and Jquery (and BootstrapCSS) in order to populate two dropdown menus with the files in the specific folder/subfolder. The first dropdown menu shows the files inthe specific path:

/Code/(all the files here)

And the second dropdown menu gets populated through an ajax call and a php script. This is part of the code: Initially I get all the folders located in a specified path and add them in the dropdown menu (this works):

<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>

Then I use an on click function in order to get all the files in the subfolder based on the selection of the above generated dropdown menu:

   $(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
        }); 
    });

And this is the PHP script:

<?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>";                              
 }
?>

I populate the second dropdown menu as following:

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

And now comes the Question. When I try to select one of the values in the second dropdown menu nothing happens. Although I have added this onclick event:

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

What am I missing here? It must be something simple I am mistaken but I can not see it.

Answer 1

Well, to begin with.

This:

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

Should be this:

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

For dynamically added elements, you might however need to delegate them doing something like this. Reference: http://api.jquery.com/on/

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