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>

然后我使用on click函数来获取子文件夹中的所有文件，具体取决于上面生成的下拉菜单的选择：

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

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

1 个答案: