背景
在前端开发中，我们通常使用 jQuery 来操作 DOM、处理事件等。而在使用 jQuery 的过程中，经常会遇到一个问题：$(document).ready() 方法没有触发。
$(document).ready(function() {
console.log('document ready');
});上面的代码段中，我们期望在文档加载完成后打印一条消息到控制台，但实际上并没有任何输出。这是为什么呢？
原因
其实，$(document).ready() 方法是 jQuery 提供的一种便捷的方式来确保 DOM 已经完全加载，并且可以安全地对其进行操作。但如果你在使用 $(document).ready() 方法时出现了问题，很可能是由于以下原因之一：
- jQuery 库未正确加载
- 代码执行顺序错误（例如将代码放在了 script 标签之前）
- 存在其他脚本或插件修改了 DOM 结构，导致 $(document).ready() 方法失效
那么，如何排查以上问题呢？
首先，我们需要确认 jQuery 库是否已被正确加载。可以通过在控制台输入 $ 或 jQuery 来检查是否已成功引入 jQuery 库。如果提示 $ is not defined 或 jQuery is not defined，则说明 jQuery 库未被正确加载。
其次，确保代码执行顺序正确。一般情况下，我们应该将脚本放在 <body> 标签内，并且在 jQuery 库之后引入：
<body>
<!-- 其他 HTML 代码 -->
<script src="jquery.min.js"></script>
<script src="your-script.js"></script>
</body>最后，如果仍然无法解决问题，那么很可能是其他脚本或插件修改了 DOM 结构，导致 $(document).ready() 方法失效。此时可以尝试使用 jQuery 的 $(window).load() 方法来代替 $(document).ready()，它能够确保整个页面（包括图片等资源）都已加载完成。
示例
以下是一个例子，演示了如何正确使用 $(document).ready() 方法来绑定事件：
-- -------------------- ---- -------
--------- -----
------
------
------------- ------------
------- -----------------------------------------------------------
-------
------
------- -------------- -----------
--------
---------------------------- -
--------------------- --------
-------------------------- -
------------- ---------
---
---
---------
-------
-------在这个例子中，我们先引入了 jQuery 库，然后在 $(document).ready() 方法中绑定了按钮的 click 事件。当文档加载完成后，会输出 "document ready" 到控制台，同时点击按钮会弹出 "Hello, world!" 的提示框。
结论
$(document).ready() 方法是 jQuery 中非常实用的方法之一，它可以确保 DOM 已经完全加载，并且可以安全地对其进行操作。但如果 $(document).ready() 方法没有触发，我们需要仔细检查代码执行顺序、jQuery 库是否正确加载以及是否存在其他脚本或插件修改了 DOM 结构等问题。同时，也可以尝试使用 $(window).load() 方法来代替 $(document).ready()，确保整个页面都已加载完成。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31084