jquery 上的功能和文档准备就绪答案

【问题标题】：jquery on function and document readyjquery 上的功能和文档准备就绪
【发布时间】：2012-08-03 14:56:43
【问题描述】：

我使用 jQuery on() 函数将onclick 函数附加到我网站中的一组锚点，如下所示：

<ul>
  <li>First <a href='#' title='delete' class="itemDelete">x</a></li>
  <li>Second <a href='http://www.repubblica.it' title='delete' class="itemDelete">x</a></li>
  <li>Third <a href='#' title='delete' class="itemDelete">x</a></li>
</ul>

<script type="text/javascript">
$(document).on('click', '.itemDelete', function(e) {
    $(this).closest('li').remove();
    e.preventDefault();
});
</script>

我应该在下面的块中插入 javascript 代码吗？

$(document).ready(function() {
  ...
});

如果是，为什么？

【问题讨论】：

因为在加载库时会执行 javascript，否则您会收到 jquery 库不存在的错误。顺便说一句，更短的方法是：$(function() { ... });
那么，是否最好将所有这些类型的 JS 代码包含在文档就绪块中？

标签： jquery document-ready jquery-on

【解决方案1】：

那段代码在任何情况下都不需要完全解析文档内容，因为您使用的是始终存在的document。作为第二个参数传递的选择器不会以任何方式用于检索元素，因此 dom 不需要为此做好准备。

如果不是上述情况，您将无法致电$(document).ready。

重要的是要了解，在幕后您将直接、正常的事件侦听器附加到 document。选择器实际上所做的就是如果在事件传播路径中没有元素与您的选择器匹配，则不会调用您的处理程序回调。显然，如果传播被较低级别的侦听器过早停止，那么在这种情况下也不会被触发。

【讨论】：

您的回答似乎与 Anthony Grist 提供的不同。他确认我不能使用$(document).ready 块，因为脚本是在加载相关元素之后提供的。您说的是 stronger，因为您声称，考虑到文档中的脚本位置，由于我在文档上调用了 on() 函数，因此没有必要使用 $(document).ready，因为文档必须准备好调用on() 函数。我说的对吗？
@jonny_cage 它与on() 无关，而是您传递给$ 的内容。您将document 传递给始终可用的$，因此调用它的方法将起作用。如果你传递一个像$("div") 这样的选择器，那么它只会在文档中找到在调用时已经解析的div。对结果 jQuery 对象的任何方法调用都将仅对找到的 div 进行操作，可能没有，其中一些或全部取决于您调用它的时间和方式。
@jonny_cage 他的推理可能会令人困惑，因为您的代码根本不依赖于那里的元素，因为您正在执行$(document)。如果您的代码依赖于那里的元素，它仍然可以工作，因为脚本元素在它们之后。
好的！现在我明白了（或者更确切地说，我认为！！！）。因此，如果可能最好在document 元素上使用on() 函数，而不是使用这种更具体的选择器。
@jonny_cage document 不是元素 :P 但从性能的角度来看，最好将其附加到最接近的普通静态父元素的普通元素上。到document 的传播路径是最长的，因此如果被滥用，可能会出现性能问题。另一个原因是document 捕获所有事件，而普通静态父级仅捕获其下的事件。您可以使用普通元素，但在这种情况下，您必须确保在可以找到它时找到它。这意味着要么在 domready 中进行，要么仅在元素之后的脚本元素中进行。

【解决方案2】：

在这种情况下，您不需要这样做。由于<script> 标记位于元素的 HTML 之后，您的代码将在元素加载后执行，无需使用 DOM 就绪事件处理程序来确保它们已加载.

也就是说，我通常更喜欢将与页面上的元素一起工作的 JavaScript 代码包含在 DOM 就绪事件处理程序中，即使它不是绝对必要的；这样，如果我决定将其移至其他位置 - 例如页面顶部或外部文件 - 或以其他方式更改它不会中断。

【讨论】：