jquery - 何时在 jQuery 中使用文档就绪事件

Question

我有以下 jQuery 代码来监听复选框:

$('.vimeo-pro-checkbox').change(function() {
  $('.vimeo-pro-panel').slideToggle();
});

除非它仅在我执行以下操作时才有效:

// create a function
var init_vimeo_pro_checkbox = function() {
  $('.vimeo-pro-checkbox').change(function() {
    $('.personal-vimeo-pro-panel').slideToggle();
  });
}

var ready = function() {
  init_vimeo_pro_checkbox();
};

// call the function
$(ready);

所以我的问题是为什么我的第一个版本不能正常工作？我的意思是它在 jquery 函数 block 内:$()。

我的印象是第一个版本就可以工作，jQuery 会选中我的复选框。

Answer 1

你的第一个语句不起作用的原因是因为 jQuery 直到那时才被加载/解析。

当浏览器收到要解析的 HTML 文档时，它首先开始解析 HTML Dom，然后开始异步加载引用的文件。

这使得您可能在 HTML 文档内的 javascript 中包含代码，该代码引用了在尚未解析的引用文件中某处定义的函数。因此浏览器会抛出错误并告诉您该函数未知。

这就是您使用 $(document).ready(); 处理程序(或短 $();)的原因。这可以确保在执行代码之前加载和解析所有引用的文件/脚本。