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

Question

我使用 PHP 和 Jquery（以及 BootstrapCSS）来使用特定文件夹/子文件夹中的文件填充两个下拉菜单。第一个下拉菜单显示特定路径中的文件：

/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() {