jQuery绑定的keyup事件不放在document ready函数内无法触发是什么原因

问题原因 #

• 核心是 DOM加载时机和JS执行顺序的冲突
  浏览器解析HTML文档是按从上到下的顺序执行的：

1. 如果你的外部JS引入标签放在<input name="restaurant">元素的前面，JS执行时该DOM元素还没被渲染出来，$('input[name=restaurant]')选择器匹配不到任何元素，事件绑定自然无效。
2. 你之前写的同类代码能生效，是因为当时你把JS引入放在了页面所有DOM元素的后面（也就是</body>闭合标签之前），JS执行时DOM已经完全渲染完成，选择器可以匹配到目标元素，不需要包裹$(document).ready()也能绑定成功。

$(document).ready()的作用 #

这个方法的作用就是等待页面的DOM树完全构建完成后，再执行内部的代码，无论你把JS引入放在HTML的哪个位置，包裹了这个方法后，都会等所有DOM都加载完成再执行选择器查找和事件绑定逻辑，因此不会出现找不到元素的问题。

其他可选解决方案 #

如果你不想每次都包裹$(document).ready()，可以使用事件委托的写法，把事件绑定到已经存在的上层节点（比如document）上，后续即使目标元素是动态生成的也能正常触发事件：

$(document).on('keyup', 'input[name=restaurant]', function(event){
    console.log("keyup");
});

内容的提问来源于stack exchange，提问作者Seong-Min Brian Baek