标题问题说明了一切。在很大程度上，我理解后一种情况。当读取 Javascript 时，对 DOM 的引用必须具有某种含义，这就是我们将其包装在 $(document).ready 中的原因。回调，或者将我们的脚本置于<body>下。我实在不明白为什么$(document).on(...)似乎无论职位如何都有效。
任何输入都会很糟糕。
最佳答案
当你这样做时$(anything) ，在运行该选择器时，任何对象都必须存在。
当您位于<head>时部分，document对象已经存在，因为它是整个页面的主父级。但是，体内还没有任何东西存在，所以不存在$(“.class”)仍然存在，因此选择器不会找到任何东西(或者更糟糕的是失败，因为主体还不存在)。
但是$(document)确实在您可能运行脚本的最早时间存在(在 <head> 部分中，因此 $(document) 可以工作并且有一些可以附加事件处理程序的东西。
如果您正在寻找 <body> 中的元素比如你的例子$(".class") ，那么您要么必须等待<body>部分加载类似 jQuery 的 .ready() 的内容(因此这些元素将在脚本运行之前存在)或者您必须将脚本实际放置在 <body> 中的该元素之后这样当您运行脚本时您想要的元素就已经被解析了。
如果您使用 .on() 的委托(delegate)事件处理，请对此进行更多补充。像这样:
$(mySelector).on("click", ".myClass", fn);
然后是 $(mySelector) 中的对象是事件处理程序将直接附加到的内容，并且是运行这行代码时必须存在的内容。匹配 ".myClass" 的对象在您运行此代码时不必存在。因此，如果您通过附加到文档对象来进行委托(delegate)事件处理:
$(document).on("click", ".myClass", fn);
然后，只有document运行这行代码时对象必须存在。自 document首先创建对象，当您可以运行 JavaScript 代码时它就已经存在，因此它似乎总是有效。
这提出了一个有趣的问题:是否可以将所有事件处理程序附加到 document目的。如果您这样做，则需要进行一些权衡(并且某些事件只有在直接附加到源对象时才能正常工作)，因此不应在不了解后果的情况下盲目地这样做。请参阅this answer有关将所有事件附加到文档对象的权衡的更详细讨论。
关于javascript - 为什么 $(document).on(..) 可以放在页面上的任何位置，而 $ (".cl").on(..) 必须放在 $(document).ready 回调中或 <body> 之后？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23184413/