JavaScript运行时错误：'$'未定义 - 使用MVC 4

In my _Layout.cshtml I have the following:

在我的_Layout.cshtml中,我有以下内容:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Intranet Ads</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        <script type="text/javascript">
            function search() {
                var searchVal = $('#txtSearchString').val();
                $('#adResults #summary').each(function () {
                    if (searchVal == '') {
                        $(this).parent().show();
                    } else {
                        $(this).not(':contains(' + searchVal + ')').parent().hide();
                    }
                });
            }

        function openEditAd(val) {
            if (val != 'admin') {
                $("#edit-content,#edit-background").toggleClass("active");
                $("#txtConfirmationEdit").text = "";
            } else {
                $("#edit-content-admin,#edit-background-admin").toggleClass("active");
                $("#txtConfirmationEdit").text = "";
            }
        }

        function closeEditAd(permission) {
            if (permission != 'admin') {
                if ($("#txtConfirmationEdit").val().trim() != "") {
                    var url = '@Url.Action("Edit", new { id = "__id__" })';
                    window.location.href = url.replace('__id__', $("#txtConfirmationEdit").val());
                }

                $("#edit-content,#edit-background").toggleClass("active");
            } else {
                if ($("#txtConfirmationAdmin").val().trim() != "") {
                    var url = '@Url.Action("Edit", new { id = "__id__" })';
                    window.location.href = url.replace('__id__', $("#txtConfirmationAdmin").val());
                }

                $("#edit-content-admin,#edit-background-admin").toggleClass("active");
            }
        }

        $(document).ready(function () {
            // Handler for .ready() called.
            console.log("hi");
        });


    </script>
</head>
<body>
...
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>

I just added the:

我刚补充说:

        $(document).ready(function () {
            // Handler for .ready() called.
            console.log("hi");
        });

To the end as I'm trying to implement a datepicker but I'm getting the

最后,因为我正在尝试实现一个日期选择器,但我得到了

JavaScript runtime error: '$' is undefined

JavaScript运行时错误:'$'未定义

As you can see in my other functions I am using jQuery commands... What is the reason for this?

正如你在我的其他函数中看到的,我正在使用jQuery命令......这是什么原因?

I was getting the exact same error when I had this in as well:

当我有这个时,我得到了完全相同的错误:

$(document).ready(
    function () {
        $('.datepicker').datepicker({
            changeMonth: true,
            changeYear: true,
            minDate: "-99Y",
            dateFormat: "dd/mm/yyyy"
        });
    });

3 个解决方案

#1

You have to put the JQuery reference first, at the top of the page. Browsers load script tags synchronously, so if you try to reference JQuery's $ before loading the JQuery source, then you'll get an "undefined" error.

您必须首先将JQuery引用放在页面顶部。浏览器同步加载脚本标记,因此如果您在加载JQuery源之前尝试引用JQuery的$,那么您将收到“未定义”错误。

Actually, since script tags block the rest of the page from loading, it might be better to instead put your other script tags at the bottom, underneath the JQuery reference. This allows the browser to load and display your page markup first, before loading the scripts. (This can give the impression of a faster page load.)

实际上,由于脚本标记会阻止页面的其余部分加载,因此最好将其他脚本标记放在JQuery引用下面的底部。这允许浏览器在加载脚本之前首先加载和显示页面标记。 (这可以给人以更快的页面加载的印象。)

#2

I faced the same issue. Open Views\Shared_Layout.cshtml and move the following script registration's sentences from the bottom of the body section, to the head section:

我遇到了同样的问题。打开Views \ Shared_Layout.cshtml并将以下脚本注册的句子从正文部分的底部移动到head部分:

@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/bootstrap")

#3

try referencing them directly ie:

尝试直接引用它们,即:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

#1