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.Here是我的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调用之后但没有处于初始状态

动态加载div的Jquery

2 个答案: