Php JSFIDLE出现问题，相同的代码不能使用jQuery

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

我对这项工作有一点了解：

但是，当在我的页面上运行时，它不会运行；当选择“No wrap-in”时，这个问题似乎被复制了

老实说，我对这4个JSFIDLE选项一无所知，它在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>

函数genCont（）{
//警报（sel+“选定文件夹”）
//这是在JSFIDLE中工作但在我的Rpi上不工作的警报：(
$（“#fList li”）。单击（函数（）{
alert（this.id）；//获取下面PHP中使用的单击li的id
});
//当然，欢迎将来使用未使用的代码和改进建议
//var fName=sel；
}

提前谢谢你，所以

---

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代码包装在

窗口

加载

处理程序中。如果您查看jsFiddle UI的左上角，您将看到一个未标记的下拉框，其中选择了值

onload

ode>

load

事件发生在页面加载周期的很晚，在解析所有HTML、加载所有外部资源（包括图像）等之后

只需将您的

脚本

标记放在页面末尾，就在

上方，这样它们作用的元素就存在了。代码的问题在于这一行：

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

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

参考资料：

---

很抱歉没有完全理解您的意思是函数genContent（）还是：$（“#fList li”）。单击（函数（）{alert（this.id）//get id of clicked li用于下面的PHP}）；还是整个脚本标记？@Ziconius检查更新，顺便说一句，document.getElementByID与jQuery$不一样（）

ready

处理程序是用于库的。如果控制

脚本

元素的位置，则有更好的选项。@塞吉奥：如果是这样，那么这个问题的标题就很糟糕，因为这里的问题是它在JSFIDLE上有效，而不是在野外。：-）我意识到我的标题在追溯上很差，而且JSFIDLE有点错误，但是是的，它在JSFIDLE上工作，而不是在我的Rpi上。@T.J.Crowder:）我认为这将有助于OP更好地理解JSFIDLE。但他现在得到了很好的回答，所以我删除了我的评论。谢谢你的锐利目光：）所以，如果我理解正确的布局应该是；降低CSS等/内容的顺序，那么onclick这个标准是针对这种情况的还是更独特的？