jsFiddle的问题和相同的代码不适用于jQuery - Issue with jsFiddle and identical code not working with jQuery

我的jQuery当前有一个，下面是通过PHP生成列表的代码，然后可以单击该列表来创建该文件夹的子内容列表。

我有一个jsfiddle的工作：这里

但是，当在我的页面上运行时，它没有运行；当选择"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>

提前感谢SO

Kris

您需要用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;
});

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

只需将script标记放在页面的末尾，</body>的正上方，这样它们所作用的元素就存在了。你的代码的问题是这一行：

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

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

参考文献：

YUI加速网站的最佳实践
谷歌闭包库工程师何时准备好DOM元素