什么会导致 document.ready 函数为空？

Question

我正在使用以下脚本：

script type="text/javascript">
    $(document).ready(function () {
    $('li:last-child').hover(function () {
        $('#test').addClass('transparent'); //mouseover
    }, function () {
        $('#test').removeClass('transparent'); //mouseout
    });
});
</script>

使用以下 HTML 布局：

<body onload="javascript that makes the menu...">
    <div id="menu" //this houses the li elements that are created by the javascript></div>
    <div id="test">

基本上，我 javascript 创建了一个充满 li 元素的菜单。这些元素中的最后一个应该能够在悬停时使用 id 测试更改 div 的不透明度。相关的css如下：

.transparent{
        opacity: 0 !important;
}

但由于某种原因，此代码不起作用。在浏览器的控制台中检查给我一个 TypeError，在上面看到的 javascript 开头的行 $(...) 为空。什么可能导致此错误，我该如何解决？

Answer 1

也许您的 JQuery 库没有被加载或者存在冲突。您是否尝试过使用 jQuery(document) 而不是 $(document)？它有相同的行为吗？如果有，我建议你看看你的图书馆的路径，如果它是正确的。

Answer 2

看来 jQuery 没有及时加载。要解决此问题，请确保在脚本运行之前加载 jQuery。此外，请确保在您描述的错误之前没有发生 javascript 错误。（您可以通过在大多数浏览器中按 F12 调出 javascript 控制台来检查这一点。）

因此您的代码可能如下所示：

<!-- Load jQuery -->
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Now do stuff with jQuery -->
<script type="text/javascript">
    $(document).ready(function () {
       ...
    });
</script>

注意：或者，可以重新定义某些内容 $。我认为这不太可能，但您可能在某个地方有一些代码正在执行此操作。

什么会导致 document.ready 函数为空？

What can cause a document.ready function to be null?

javascript

html

css

web