Question

我正在浏览http://docs.jquery.com/How_jQuery_Works，并且发现要求$.click() $(document).ready()中包含$(document).ready()事件甚至有点奇怪。我的困难如下：

当文档加载时，控件将进入$.click()函数，但是它会继续执行$.click()吗？（基于它不会的行为。但是当控件进入正常函数时，为什么它不会进入$.click()函数？）
由于用户只有在文档准备好后才能看到网址，是否真的需要在$(document).ready()中嵌入{{1}}？

Answer 1

How jQuery Works document使用在.click()内绑定$(document).ready()的示例，以确保在函数中创建了绑定.click()事件的元素执行。

使用函数作为参数调用的.click()在与其前面的选择器匹配的节点上执行 .click()，而是将函数绑定到匹配节点onclick。

如果你试图做这样的事情：

$('a').click(function(){
  alert('clicked me');
});

...在文档<head>中或在呈现任何<a>元素之前，事件不会绑定到任何节点，因为没有与$('a')选择器匹配的节点执行功能的时间。

此外，如果您在创建了一些<a>标记时执行了此操作，则只有已创建的标记才会获得绑定事件。绑定函数后创建的<a>标签不会有.click()绑定。

所以在jQuery（和其他JavaScript框架）中，你经常会看到在$(document).ready(function(){});

中添加事件处理程序，绑定小部件等的惯例

Answer 2

这不是对.click()的实际调用，而是调用它的元素的选择器。

例如，如果有一个元素id="myButton"，那么您可以用以下内容引用它：

$('#myButton')

但是，如果该元素尚未加载（即，如果文档尚未准备好，并且您知道当前已加载），然后该选择器将找不到任何东西。所以它不会在任何事情上调用.click()（要么绑定事件，要么触发它，取决于.click()的参数。）

您可以使用其他方法such as the jQuery .on() function，它可以将事件绑定到公共父元素，并从文档生命周期后期添加的事件中过滤“冒泡”事件。但是如果你只是使用普通的选择器并调用一个函数，那么选择器需要在DOM中找到一些东西，以便函数做任何事情。

Answer 3

是的，你需要确保你要添加点击处理程序的DOM元素存在，你知道这个文件就准备好了。

Answer 4

$(document).ready(..)方法试图解决的问题是页面的javascript代码的执行与页面中的控件绑定的时间之间的紧张关系。一旦文档准备好并且DOM元素可用，ready函数将会触发，因此javascript代码可以对DOM做出合理的假设

最常见的例子是javascript代码相对于它试图操作的DOM元素的位置。考虑

<script>
$('#target').click(function() {
  alert('It was clicked');
});
</script>
<div id="target">Click Me</div>

在此特定示例中，javascript将无法按预期运行。当输入脚本块时，运行click行，并且当前没有ID为target的DOM元素，因此处理程序绑定到任何内容。代码没有什么问题，它只是在创建DOM元素之前运行的不幸时机。

在此示例中，问题很明显，因为代码和DOM元素在视觉上配对在一起。在更复杂的网页中虽然javascript通常是一个完全独立的文件，并且没有关于加载顺序的可视保证（也不应该）。使用$(document).ready(..)抽象消除了排序作为潜在问题根源的问题，并促进了关注点的正确分离

Answer 5

Javascript通常会在读取标记后立即开始执行。这意味着在将脚本放入头部的标准实践中，尚未创建任何元素，您可以将单击处理程序绑定到。甚至身体元素还不存在。使用jQuery.ready延迟执行代码，直到所有DOM元素都被加载。