为什么$(document).ready()没有触发？

Question

在一个 PHP 文件中，我使用了 include 命令来引入 js.php 文件，在此之前，我已经引入了 jQuery 文件。

<script type="text/javascript">

$(document).ready(function(){
     alert("hello");
});
</script>

但它不起作用。为什么？当我跳过$(document).ready函数时，它可以工作。

但是我需要jQuery代码。出了什么问题？

- never_had_a_name

---

你能同时发布你的PHP代码吗？ - AmbrosiaDevelopments

请发布您收到的错误。如果您使用的是Firefox浏览器，则可以通过“工具>错误控制台”访问错误控制台。 - Yacoby

你是否使用其他的JavaScript框架？你的jQuery文件路径是否正确？ - nowk

Answer 1

根据您提供的信息，最可能的答案是在页面中未正确包含jQuery核心文件。您需要类似于以下内容： ```html ```

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

很有可能是缺失或输入不正确。

- David

---

我已经多次看到完全相同的问题 - 几乎总是由于 jQuery <script> 标签出现了这种情况。我自己也犯过这个错误 :) - Mark Schultheiss

使用Google加载程序可以帮助避免这些类型的拼写错误，同时也可以自动下载更新后的jQuery版本（如果需要）：<script src="http://www.google.com/jsapi"></script> <script> google.load("jquery", "1"); </script> - Tim Ridgely

Answer 2

另一个会默默失败的原因是，后面的所有回调函数都不会被调用：

$(document).ready(null);

所以检查一下是否存在返回null的变量或语法错误。就像这个例子：

$(document).ready(function($){}(jQuery));

请注意，上述函数会立即调用并返回未定义(undefined)。

- gregers

---

例如我，我之前在 $().each 循环的回调函数中将一个未定义的变量用作选择器输入。 - jave.web

Answer 3

1. 检查jQuery是否正确加载。
2. 查看浏览器的进度条：它可能正在加载某些计数器，直到它们加载完成文档才准备就绪：这在外部资源较慢时经常发生。
3. 尝试使用$(function(){ alert(...); });，以防万一...
4. 检查是否存在此onload绑定之前的JS错误。使用Firefox的FireBug插件进行检查。

- kolypto

---

Firebug说$(document).ready(function(){未定义...我的jquery文件有问题吗？ - never_had_a_name

你正在使用Mootools吗？如果是的话，请确保已经设置了Jquery以实现兼容性。 - Mottie

如果出现 $(document).... is not a function 的错误，那么有两种可能性：1）另一个库占用了$符号，2）jQuery没有成功加载。 - helloandre

Answer 4

请注意如何定义jquery包含标签。似乎由于某种原因，您需要使用两个单独的标签打开和关闭标签。使用一个标签而不关闭似乎行不通：

有效：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

无法工作：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"/>

- raoulsson

Answer 5

在阅读Zakas的JavaScript错误抛出艺术后，我开始尝试使用JavaScript抛出自己的错误来解决JS问题。

但不幸的是，这种方法会导致网站中与之无关的部分jQuery的ready()函数静默失败。 :(

我学到了以下内容的区别：

throw new Error()

is different from

console.error()

所以，我开始使用console.error()，但控制台仍然显示红色高亮。

- Michael R

Answer 6

是的，我注意到有时会出现这个问题，我为此编写了安全解决方案，可以解决这个问题。

// jquery plugin 'jquery.ready.fix.js'
// @author Szymon Działowski
;(function ($) {
    $.fn.ready.old || $(function (r) {
        r = $.fn.ready;
        $.fn.ready = function (fn) {    $.isReady ? fn() : r(fn);    };
        $.fn.ready.old = r;
    });
})(jQuery);

之后你可以运行代码：

$(function () {alert('go')})

它总是触发警报。

PS：这是一种称为“鸭子打补丁”的技术，更多信息请查看：http://www.paulirish.com/2010/duck-punching-with-jquery/。

- monstersmart

Answer 7

我也遇到了类似的问题，这是我所做的。

确保在您的JavaScript文件中定义回调函数之后放置document.ready。

在这里，当解析document.ready时，init尚未定义。

//won't work
$(document).ready(init);
var init = function() {
   console.log('init not called');
}

正确的方法：

//Works
var init = function() {
   console.log('document is ready');
}
$(document).ready(init);

请注意，$(document).ready(init) 放置在最后。

- Pramod

Answer 8

如果以上方法都不起作用，另一个“肮脏”的技巧是将您的函数包装到一个没有时间限制的SetTimeOut函数中，这样可以将代码排队，等待当前调用堆栈执行完毕后再运行。

     setTimeout(function(){
        FillOpenTranscriptionTasks();
    });

- Ibrahimsha

Answer 9

另一个需要检查的点：也许你的程序中有PHP错误。PHP致命错误会退出脚本，$(document).ready将永远不会被执行。

根据你的服务器设置或CSS，你可能看不到致命错误消息。

- Adam

Answer 10

在我的情况下，document.ready没有被调用，因为通过Ajax请求将HTML表单发送到服务器，只有部分文档被接收 - 并且在Ajax请求后不会调用文档准备好函数。

因此，一些按钮不再绑定到事件 .click() 等，因为这些按钮是新的，并且这些事件的绑定仅在文档准备好时第一次调用 - 不适用于AJAX。

- Tomas Kubes