Question

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

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

header.js

select tb.notransaksi, tb.kode, tb.nama, tb.satuan, tb.konversi, tb.jumlahPesan po.jumlahTerima
from terima_barang tb join po_detail po
on rb.notransaksi = po.notrnsaksi
and tb .kode = po.kode
and tb.nama = po.nama
and tb.satuan = po.satuan
and tb.konversi = po.konversi

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

$(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);
    }
});

加载页面时的输出

<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

有谁知道为什么会这样？我已经分析了几个小时，我不明白原因。任何帮助/想法/建议将受到高度赞赏。谢谢。

Answer 1

我可能有一个解决方法。这不是你寻求的确切答案。但是，你可以检查将卷轴处理程序的定义放在文档之外是否适用于你？请尝试如下：

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);
    }
});

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

Answer 2

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

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

我通过删除require.js（并将其手动带入的依赖项添加到我的页面中）解决了这个问题。

JavaScript：$不是函数（但它似乎是）

2 个答案: