动态加载div上的jQuery

Question

我有以下代码，

html表格

<form id="t-files">
    <a style="margin-left:160px;" class="list-directories" href="#">Select File Path</a><br><br>
    <div id="fileList"></div>
</form><br> 

Ajax代码获取文件夹名称

 $('.folderLink').on('click', function (e) { 
    alert('hello');
    e.preventDefault();
    $.ajax({
        type: 'post',
        url: 'list-directories-inner.php',
        dataType: 'text',
        data: $('#t-files').serialize(),
        success: function (data) { 
            alert(data);
            //$("#fileList").html(data);
        }
    });
});  

php文件来处理文件夹名称

<?php        
    $path    = 'templates';
    $files = scandir($path);

    foreach($files as $result) {
         if ($result != "." && $result != ".." && $result != "desktop.ini")
            {
                  echo '<img src="img/folder.png" width="40px"><a name="'.$result.'" class = "folderLink" href="#">'.$result.'</a></img><br>';
            }

    }
?>

上面的代码使用ajax将模板中的所有文件夹名称显示为链接，这工作正常，现在我要转到显示的每个文件夹的子文件夹。 当我单击链接时，它们都不起作用（没有警报）。 忘了ajax，这是我的jQuery，它不起作用。

$('.folderLink').on('click', function (e) { 
    alert('hello');
}); 

整个事情发生在另一个jquery加载的div中。 我不知道这个问题。 请帮忙

Answer 1

您必须使用委托事件绑定。 仅当您的.folderLink已经在DOM直接事件绑定才起作​​用。 但是在您的情况下，它是动态生成的

$(document).on("click",".folderLink",function(){
 //do stuff
})

Answer 2

您的DOM中没有.folderLink类的CSS样式。 也许在AJAX调用之后但没有处于初始状态