jQuery JavaScript 运行时错误：“$”未定义 - 使用 MVC 4
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18926468/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript runtime error: '$' is undefined - using MVC 4
提问by webdad3
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"
});
});
回答by McGarnagle
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 引用下方。这允许浏览器在加载脚本之前首先加载和显示您的页面标记。（这会给人一种更快的页面加载的印象。）
回答by lukiller
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 并将以下脚本注册的句子从 body 部分的底部移动到 head 部分：
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/bootstrap")
回答by user2216667
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>
