关于函数和文档的jquery准备好了

时间:2012-08-03 14:56:44

标签: jquery document-ready jquery-on

我使用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() {
  ...
});

如果是,为什么?

2 个答案:

答案 0 :(得分:3)

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

如果上述情况并非如此,您将无法首先致电$(document).ready

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

答案 1 :(得分:2)

在这种情况下,您不需要。由于<script>标记位于元素的HTML之后,因此在元素加载后将执行代码,无需使用DOM ready事件处理程序来确保它们具有已经装好了。

也就是说,我通常更喜欢将所有我的JavaScript代码包含在DOM ready事件处理程序中的页面元素上,即使它不是绝对必要的;这样,如果我决定将其移动到其他地方 - 例如页面顶部或外部文件 - 或以其他方式更改它,它不会破坏。