Question

我目前正在使用我的jQuery，下面是通过PHP生成列表的代码，然后可以单击该列表以创建该文件夹的子内容列表。

我有一个有效的方法：here

然而，当在我的页面上运行它没有运行;选择“No wrap-in”时，似乎会复制这个问题。

老实说，我对这些4个jsfiddle选项一无所知，它适用于3但不是4。这可能是我的愚蠢疏忽或者我可能缺少某种形式的关键信息

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<?php
if ($handle = opendir('fileServer')) {
    while (false !== ($file = readdir($handle)))
    {
        if (($file != ".") 
         && ($file != ".."))
        {
            $thelist .= '<LI id='.$file.'>'.$file.'';
        }
    }

    closedir($handle);
}
?>


<script type="text/javascript">
function genCont(){
//  alert(sel + "folder selected")


//This is the alert that works in JSfiddle but not on my Rpi :(
$("#fList li").click(function() {
    alert(this.id); // get id of clicked li used in below PHP
});

//future unused code, suggestion for improvement are, of course, welcome 
//var fName = sel;
<?php
if ($handle = opendir(/*not used yet*/)) {
    while (false !== ($file = readdir($handle)))
    {
        if (($file != ".") 
         && ($file != ".."))
        {
            $thelist2 .= '<LI><a href="'.$file.'">'.$file.'</a>';
        }
        }

    closedir($handle);
}?>
}
</script>


<div class="fsFolder">
<ul id="fList">
<?=$thelist?>   
</ul>
</div>

提前谢谢你

克里斯

Answer 1

您需要使用doc.ready

包装代码

$(document).ready(function(){/*code*/});

<强>更新

$(document).ready(function () {

    $("#fList li").click(function () {
        alert(this.id); // get id of clicked li
    });

    //$boobies = document.getElementByID("#fList li").this.id
    $boobies = $('#fList li')[0].id;

});

Answer 2

您已经被jsFiddle的 非常令人惊讶的默认行为 所击中，即将所有JavaScript代码包装在window load中处理程序。如果您查看jsFiddle UI的左上角，您将看到一个未标记的下拉框，其中选择了值onload。页面加载周期中window load事件发生很晚，解析完所有HTML后，所有外部资源（包括图像）都已加载等等。

只需将script标记放在页面末尾，就在</body>上方，这样就可以存在他们所处理的元素。你的代码的问题在于这一行：

$("#fList li").click(...);

在之前发生该元素存在，因为它位于页面源中的上方。只需将其放在页面源中。

参考文献：

YUI Best Practices for Speeding Up your Website

Google Closure Library engineers on when DOM elements are ready

使用jsFiddle和相同的代码不能使用jQuery的问题

2 个答案: