Javascript 超级简单的JQuery问题把我难住了。代码不会在<；头>；但将在<；车身>；_Javascript_Jquery

Javascript 超级简单的JQuery问题把我难住了。代码不会在<；头>；但将在<；车身>；

javascript jquery

Javascript 超级简单的JQuery问题把我难住了。代码不会在<；头>；但将在<；车身>；,javascript,jquery,Javascript,Jquery,我以前从未见过这种情况。这么简单的事情我做错了我的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"> Clic

我以前从未见过这种情况。这么简单的事情我做错了

我的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>


点击我
$（'#foo'）。单击（函数（）{
警惕（“我来了”）；
});

这不会：

<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'）。单击（函数（）{
警惕（“我来了”）；
});
点击我

有点困惑。我没看到打字错误。非常感谢您的建议

试试这个。这是因为DOM尚未加载

$(document).ready(function() {
    $('#foo').click(function(){
        alert("I got here");
    });
});

或者不使用特定的库（我认为它更自我描述）

HTML文件是按顺序加载的，因此您的代码在

body

中工作，因为它在创建

div

后触发，但在

head

部分中不工作，因为此时尚未创建

div

。这就是所使用的

.onload

事件-它保证在DOM未就绪之前不会执行任何操作。

试试这个。这是因为DOM尚未加载

$(document).ready(function() {
    $('#foo').click(function(){
        alert("I got here");
    });
});

或者不使用特定的库（我认为它更自我描述）

HTML文件是按顺序加载的，因此您的代码在

body

中工作，因为它在创建

div

后触发，但在

head

部分中不工作，因为此时尚未创建

div

。这就是所使用的

.onload

事件-它保证在DOM未准备好之前不会执行任何操作。

告诉您将代码包装到

$（document）.ready（）

中的注释和答案是正确的，但没有说明发生这种情况的原因

发生这种行为的原因是，当您尝试执行脚本时，DOM尚未在其Entrity中创建，因此您要查找的元素不存在。使用

$（document）.ready（）

时，请确保在DOM准备就绪后运行脚本

告诉您将代码包装到

$（document）.ready（）

中的注释和答案是正确的，但没有说明发生这种情况的原因

发生这种行为的原因是，当您尝试执行脚本时，DOM尚未在其Entrity中创建，因此您要查找的元素不存在。使用

$（document）.ready（）时，请确保脚本在DOM就绪后运行
问题在于，您的代码在元素存在之前运行，因此$（“#foo”）
找不到它
除非使用，否则当在HTML中遇到脚本中的代码时，将运行标记中的代码。因此：
…元素存在，您的代码可以找到它
你有三个选择：
使用事件委派，将事件挂接到文档
，但仅当事件在冒泡阶段通过#foo
元素时才对其作出响应。例如：
$(document).on("click", "#foo", function() {
    // Do something
});

除非有其他东西处理document
的子元素上的事件并防止它冒泡，否则这种方法很有效
将脚本放在它在HTML中引用的元素下面。这是。在脚本运行时，脚本
标记上方的标记中定义的任何元素都将存在。因此，通常的建议是将脚本
放在关闭
标记之前
如果无法控制脚本元素的位置，请使用jQuery的
或快捷方式：
$(function() {
    // Your code here
});


问题是您的代码在元素存在之前运行，因此$（“#foo”）
找不到它
除非使用，否则当在HTML中遇到脚本中的代码时，将运行标记中的代码。因此：
…元素存在，您的代码可以找到它
你有三个选择：
使用事件委派，将事件挂接到文档
，但仅当事件在冒泡阶段通过#foo
元素时才对其作出响应。例如：
$(document).on("click", "#foo", function() {
    // Do something
});

除非有其他东西处理document
的子元素上的事件并防止它冒泡，否则这种方法很有效
将脚本放在它在HTML中引用的元素下面。这是。在脚本运行时，脚本
标记上方的标记中定义的任何元素都将存在。因此，通常的建议是将脚本
放在关闭
标记之前
如果无法控制脚本元素的位置，请使用jQuery的
或快捷方式：
$(function() {
    // Your code here
});


您需要在dom就绪时执行脚本。如果您将代码放入head，它将在浏览器在主体中加载dom之前执行，因此jquery无法找到foo。如果代码位于id为“foo”的元素之后的body中，那么它将在javascript代码执行之前创建该元素
$(document).ready(function() {

    $('body').on('click', '#foo', function(event) {
        alert('Hello World');
    });

});

如果您在代码周围包装一个on ready，它将再次工作。您还可以在上使用jQuery，并告诉jQuery监听主体，这样做的好处是，即使元素foo由ajax加载并在ready执行后插入dom，它仍然可以工作
$(document).ready(function() {

    $('body').on('click', '#foo', function(event) {
        alert('Hello World');
    });

});

下面是JSFIDLE:
当dom就绪时，您需要执行脚本。如果您将代码放入head，它将在浏览器在主体中加载dom之前执行，因此jquery无法找到foo。如果代码位于id为“foo”的元素之后的body中，那么它将在javascript代码执行之前创建该元素
$(document).ready(function() {

    $('body').on('click', '#foo', function(event) {
        alert('Hello World');
    });

});

如果您在代码周围包装一个on ready，它将再次工作。您还可以在上使用jQuery，并告诉jQuery监听主体，这样做的好处是，即使元素foo由ajax加载并在ready执行后插入dom，它仍然可以工作
$(document).ready(function() {

    $('body').on('click', '#foo', function(event) {
        alert('Hello World');
    });

});

下面是JSFIDLE:
简单的解决方案……使用现成的处理程序。无法在不存在的元素上运行代码。是的，你的身体