JavaScript:$ 不是一个函数(但看起来是）

JavaScript: $ is not a function (but it seems like it is)

本文关键字：一个 函数 看起来 JavaScript      更新时间：2023-09-26

我有一个奇怪的JavaScript问题，我就是无法理解。

我的自定义JavaScript文件"header.js"使用jQuery。它抛出了臭名昭著的"$ 不是函数"错误消息，但我不明白为什么。奇怪的是我包含jQuery.js并且有问题的代码似乎没有问题绑定到jQuery事件。所以没有包含jQuery不是问题。

标头.js 

$(document).ready(function () {
    if ($(document).width() >= 768) {
        var header = false;
        var scrollHandler = function () {
            var scrollTop = $(window).scrollTop(); // line 5 that throws the error
            // more code
        };
        //register function which is called on scroll
        $(window).scroll(scrollHandler);
    }
});

我的 HTML（带有一些调试输出）

<script src="~/js/vendor/jquery.js"></script>
<script>
    function printTest(str) {
        console.log("test (" + str + "): " + $(".test").length);
    }
</script>
<script>
    printTest("2.1 before header");
</script>
<script src="~/js/header.js"></script>
<script>
    printTest("2.2 after header");
</script>

加载页面时的输出

test (2.1 before header): 1
test (2.2 after header): 1

但是一旦我滚动我的控制台错误输出显示：

TypeError: $ is not a function (line 5 in header.js)

有人知道为什么会这样吗？我已经分析了几个小时，我不明白原因。任何帮助/想法/建议将不胜感激。谢谢。

我可能有解决方法。这不是您寻求的确切答案。但是，您可以检查将滚动处理程序的定义放在文档准备就绪之外是否适合您吗？请尝试以下操作： 

var scrollHandler = function() {
    var scrollTop = $(window).scrollTop(); // line 5 that throws the error
    // more code
};
$(document).ready(function() {
    if ($(document).width() >= 768) {
        var header = false;
        //register function which is called on scroll
        $(window).scroll(scrollHandler);
    }
});

如果这也不起作用，那么有一些东西覆盖了您的 $ 定义。你能告诉我们这是否适用于你的代码吗？

好的，所以如果你有同样的问题，这就是我解决它的方式。

问题是与要求.js冲突。Require.js 会自动随 Sitecore 中的模块一起提供。起初我不知道require.js导致了这种冲突，因为当我检查JavaScript文件时，我正在寻找$的一些覆盖。我当时不知道的是，require.js还有一个配置文件，其中包含自己的jQuery版本。

我通过删除 require.js（并将其手动带到我的页面的依赖项）解决了它。

相关文章：