为什么$ .click()必须包含在$(document).ready()中？

Question

我正在通过http://docs.jquery.com/How_jQuery_Works找到封闭$.click()事件的要求$(document).ready()甚至有点奇怪.我的困难如下:

加载文档时,控件将进入$(document).ready()功能但是会继续执行$.click()吗？(基于它不会的行为.但是当控件进入正常功能时,为什么不进入$.click()函数？)
由于用户只文档后可以看到网址是准备好了,是不是真的需要嵌入$.click()内$(document).ready()？

Answer 1

该如何jQuery的Works文档使用的结合的例子.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()).

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