以前从未见过这个。这么简单的事情我做错了。
我的 JQuery 代码刚刚停止在 head 标签中工作，现在只能在 body 中工作。
这会起作用:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id="foo">
Click Me
</div>
<script type="application/javascript">
$('#foo').click(function(){
alert("I got here");
});
</script>
</body>
</html>
这不会:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="application/javascript">
$('#foo').click(function(){
alert("I got here");
});
</script>
</head>
<body>
<div id="foo">
Click Me
</div>
</body>
</html>
有点迷茫。我没有看到错字。非常感谢您的建议!
最佳答案
问题是您的代码在元素存在之前运行，所以$("#foo")没有找到它。
除非您使用 async or defer attributes ，你的代码 script标记在 HTML 中遇到时 运行。所以:
<script>/* your code here */</script>
<div id="foo">..</div>
...将找不到 #foo元素，因为它还不存在。
如果你有
<div id="foo">..</div>
<script>/* your code here */</script>
...该元素存在并且您的代码可以找到它。
你有三个选择:
使用事件委托(delegate)，将事件挂接到
document上但仅当事件经过#foo时才响应它冒泡阶段的元素。示例:$(document).on("click", "#foo", function() { // Do something });这很好用，除非有其他东西可以处理
document的后代元素上的事件。并防止它冒泡。将脚本放在它在 HTML 中引用的元素下方。这是 vastly preferred .
script上方 标记中定义的任何元素标签将在您的脚本运行时存在。所以通常的建议是把script就在收盘前</body>标签。如果您不控制
script的位置元素去，使用 jQuery 的readyfunction .$(document).ready(function() { // Your code here });或快捷方式:
$(function() { // Your code here });
关于javascript - super 简单的 JQuery 问题让我很困惑。代码不会在 <head> 中触发，但会在 <body> 中触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24591048/