在文档准备好之前或之后使用jQuery？

Question

以下两种情况给我相同的行为。但是在技术上有什么区别？（我把下面的代码放在body标签中的最后一个script标签的部分）

$(document).ready(function() {
  $('.collapse').collapse({toggle: false});

  $(document).on('click', '#expandAllLessons', function() {
    $('div.accordion-body').collapse('show');
  });

  $(document).on('click', '#collapseAllLessons', function() {
    $('div.accordion-body.collapse').collapse('hide');
  });
});

或者

$(document).ready(function() {
  $('.collapse').collapse({toggle: false});
});

$(document).on('click', '#expandAllLessons', function() {
  $('div.accordion-body').collapse('show');
});
$(document).on('click', '#collapseAllLessons', function() {
  $('div.accordion-body.collapse').collapse('hide');
});

谢谢。

- user2284918

---

一个更好的起点：- http://api.jquery.com/ready/ - Pranav

Answer 1

大致来说，它们在做同样的事情。

使用带有子选择器的.on()，可以使用事件委托将任何符合该选择器的元素绑定到任何未来事件。 document 是 DOM 树的顶部（并在脚本执行时可用），因此您的事件委托有效。

.ready() 等待 DOM 组装完成，因此您可以更可靠地使用像 .click()、.hover() 等方法直接绑定事件。

因此，您的第一个示例只是等待 DOM 组装，然后委派事件。第二个示例是立即在脚本执行时委派事件。

jQuery 关于 .on() 的文档：

直接和委托事件

大多数浏览器事件会从发生事件的文档中最深层的内部元素（事件目标）向上冒泡或传递到 body 和文档元素。在 Internet Explorer 8 及更低版本中，一些事件，例如 change 和 submit 并没有本地冒泡，但 jQuery 可以修补这些并创建一致的跨浏览器行为。

如果省略了选择器或选择器为 null，则事件处理程序被称为直接绑定。处理程序每次在选定元素上发生事件时都会被调用，无论它是直接在元素上发生还是从一个后代（内部）元素冒泡而来。

提供了选择器时，事件处理程序被称为委托。当事件直接发生在绑定元素上时，不会调用处理程序，但仅针对与选择器匹配的后代元素（内部元素）。jQuery 会将事件从事件目标向上冒泡到附加处理程序的元素（即，从最内层到最外层元素），并在该路径上运行与选择器匹配的任何元素的处理程序。

- Matthew Blancarte

Answer 2

无论你做什么函数，不管是$(document).ready(function(){});还是其他什么，所有在该函数内的内容只能读取其级别或以上级别的东西（除非你使用返回函数）。

顶部段落意味着所有代码都不会被执行，直到它被加载，但也意味着它是嵌套代码。嵌套代码意味着某些变量和函数将无法从外部读取。例如：

function bob(){
  function sandy(){
    function joe(){
      alert("I can access anything written by sandy, bob or ray!");

    }
  }
}

function ray(){
   alert("I can't see anything from anybody but bob!");
}

- Shazboticus S Shazbot

Answer 3

首先看评论。在jQuery 1.7之后，on也可以委托事件：

" .on()方法将事件处理程序附加到jQuery对象中当前选择的元素集。从jQuery 1.7开始，.on()方法提供了所有所需的功能来附加事件处理程序。有关从旧的jQuery事件方法进行转换的帮助，请参见.bind()、.delegate()和.live()。"

因此，在jQuery 1.7之前，这是正确的答案：

第一种方式更好，因为当HTML文档完全加载到DOM时，会触发文档就绪事件。然后，您可以确保所有元素都已就位，并且可以将事件绑定到它们。

但是，如果在加载'#expandAllLessons'元素到DOM之前绑定事件，则它将根本不起作用，因为jQuery选择器将找不到任何元素，并且不会在任何地方绑定此事件。

在1.7之后，两者的工作方式几乎相同。几乎，因为在第一种情况下，在文档准备就绪之前触发事件时，它不会被执行。在第二个示例中，它将被执行，因为它是在脚本加载时附加的。

- Karol

---

他正在使用事件委托，因此不需要准备好文档。如果他使用直接绑定，你就是正确的。 - Matthew Blancarte

感谢@MatthewBlancarte在-1之后添加评论。但我只能部分同意你的说法：“从jQuery 1.7开始，.live()方法已被弃用。使用.on()来附加事件处理程序。”但我很确定，在1.7之前，on并不能像代理那样工作。 - Karol

@MatthewBlancarte - 我因为你的评论改变了我的答案。谢谢 - 我不知道他们已经改变了这种行为。 - Karol