Question

是document.ready真的很必要。这个问题已被问到无数次。

此代码段与document.ready一起使用并且运行良好

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#p1").mouseenter(function(){
    alert("You entered p1!");
  });
});
</script>
</head>
<body>

<p id="p1">Enter this paragraph.</p>

</body>
</html>

但是，如果我要用此替换脚本标记内容。

  $("#p1").mouseenter(function(){
    alert("You entered p1!");
  });

它不再有效。但是，如果参数是鼠标输入时文档未准备就绪。我在尝试之前等了几分钟，但仍然无效。有什么我错过了

Answer 1

此外，您可以将该脚本放在body代码的底部中。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <p id="p1">Enter this paragraph.</p>
  <script>
    $("#p1").mouseenter(function() {
      alert("You entered p1!");
    });
  </script>
</body>

＆＃13;

问：为什么$("#p1").mouseenter()在head标记中无效，甚至等待一段时间后呢？

答：$("#p1")是函数，每当调用它时，它会查找整个DOM树，查找ID为p1且注册的元素它的事件监听器，所以当DOM仍然被加载时，它找不到这样的元素，显然不能为它注册任何事件监听器。因此，当您在一段时间后在此元素上输入鼠标时，没有为此元素分配事件侦听器。

Answer 2

代码

$("#p1").mouseenter(function(){
    alert("You entered p1!");
});

是否将事件处理程序绑定到DOM元素#p1。 $(document).ready()处理程序确保在尝试执行处理程序中的任何代码之前加载所有DOM元素。如果创建与id="p1"关联的mouseenter事件处理程序时，mouseenter元素不存在，则无论您等待多长时间，{{1}}事件处理程序都不会处理任何事情。

在将事件处理程序与它们绑定之前，始终确保元素存在。

Answer 3

你必须明白，当读取DOM时，它会沿途解释你的脚本。如果您想为尚未被浏览器加载的元素添加处理程序。浏览器会忽略它。在这里你有3个choces：

将JS代码放在document.ready函数中 - 您正在使用它：）
将所有JS代码放在DOM的底部（就在结束正文标记之前） - 这也可以提升你的表现
对你的脚本标签使用defer属性，这将告诉你的浏览器，它应该在加载DOM后开始执行JS代码。

关于延迟属性： http://www.w3schools.com/tags/att_script_defer.asp

Answer 4

嗯，您需要知道的是，在使用任何jquery选择器之前，您的元素应该在DOM中。即如果将脚本标记放在元素下面，则不需要使用ready事件。浏览器从上到下读取html，一旦遇到脚本标记，该标记内的代码立即执行并开始查找放置在jquery选择器中的元素。

没有document.ready功能不起作用

4 个答案: