jQuery库文件是在body元素之前加载的,但要操作dom元素必须等待dom元素加载完成后才能对dom操作。
页面加载过程有两个事件:
- ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件,常用于jQuery)
- onload,指示页面包含图片等文件在内的所有元素都加载完成(可以说:ready 在onload 前)
绑定元素事件响应的JS,一定要等到相应元素加载后或文档全部加载完成后再执行,否则无法找到元素不可绑定事件。
js代码单独放一个文件但元素绑定事件无效的原因分析:
- js文件引用路径错误(解决方法:在浏览器检查调试,点引用链接看能否跳转到js文件)
- 如果有用jQuery,要引用的jQuery库放在了js文件的后面导致”$”没有定义的错误(解决方法:在浏览器按f12)
- 页面中引用了多个js文件并且有多个js文件里有window.onload事件,导致先加载的事件被后加载的事件覆盖
- 最好保持js文件编码与html文件编码一致,统一用utf-8(不过我暂时没有遇到这种问题,网上有说这会导致js注册的事件无效)
- 检查有没有加上window.onload或者$(document).ready(function(){})
- 实在不行找一份能运行的代码直接对照着修改或把自己代码贴到能运行两个代码里(没错,我就是这么水,原谅我也是一个新手)