外部JS文件中使用$(document).ready时函数无法运行的问题

嘿，这个问题我之前也碰到过，本质是作用域差异在搞鬼：

• 当你不把myFunction()放进$(document).ready()里时，这个函数默认属于全局作用域（也就是挂载在window对象上），按钮的onclick属性能直接找到全局作用域里的函数，所以能正常运行。
• 但一旦把函数塞进$(document).ready()的回调函数内部，它就变成了这个回调函数的局部变量，全局作用域根本访问不到它，点击按钮时浏览器就会报错说myFunction is not defined，自然就失效了。

办法一：把函数挂到全局作用域 #

直接把函数赋值给window对象的属性，让它变成全局可访问的：

$(document).ready(function() {
  window.myFunction = function(){ 
    alert("Alright!"); 
  };
});

这样修改后，按钮的onclick="myFunction()"就能正常调用了。

办法二：用jQuery事件绑定（更推荐） #

放弃内联的onclick属性，改用jQuery的事件绑定方式，这是更符合jQuery最佳实践的写法，还能避免全局污染：
先修改你的HTML，去掉内联事件，给按钮加个ID：

<button id="clickBtn">Click</button>

然后在$(document).ready()里绑定点击事件：

$(document).ready(function() {
  $("#clickBtn").click(function(){ 
    alert("Alright!"); 
  });
});

小提醒 #

第二种办法更值得推荐，因为它把HTML的结构代码和JavaScript的行为代码分离开来，后续维护起来更方便，也不会乱堆全局变量~

内容的提问来源于stack exchange，提问作者user9644796