jquery 功能和文档就绪

Question

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

<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>

我应该在下面的 block 中插入 JavaScript 代码吗？

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

如果是，为什么？

Answer 1

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

如果不是上述情况，您将无法首先调用 $(document).ready。

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