MVC4 $ 未定义答案

【问题标题】：MVC4 $ is undefinedMVC4 $ 未定义
【发布时间】：2014-04-24 09:20:12
【问题描述】：

在 Visual Studio 2013 中，我基于默认的 MVC4 Intranet 模板创建了一个新项目。在 _Layout.cshtml 中，我添加了一些自定义代码以在 div 容器中添加测试链接。

<!DOCTYPE html>
<html lang="en">
<head>
    @Scripts.Render("~/bundles/jquery","~/bundles/modernizr")
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")                   
</head>
<body>
    <header>
        <div class="content-wrapper">
            <div class="float-left">
                <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
            </div>
            <div class="float-right">
                <section id="login">
                   Hello, <span class="username">@User.Identity.Name</span>!
                </section>
                <nav>
                    <ul id="menu">
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <div id="body">
        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content clear-fix">
            @RenderBody()
        </section>

        <div id="test"></div>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
            </div>
        </div>
    </footer>

    @RenderSection("scripts", required: false)

    <script type="text/javascript">
        $(function () {
            $("#test").append("<a href='#'>test linkje</a>");
        });
    </script>
</body>
</html>

当我按 F5 并进入 Internet Explorer 10 时，一切正常。当单击 HTML Actionlink 时，问题开始出现。然后 Visual Studio 出现错误消息：

0x800a1391 - JavaScript 运行时错误：“$”未定义

在浏览器中按继续并按 F5 后，它再次工作。在 Firefox 或 Chrome 中运行它时我没有这个问题。即使我在 Chrome 或 Firefox 中运行它并且我将 url 粘贴到 IE 10 中，它也可以正常工作。

在我看来，在 IE10 下运行它直接把事情搞砸了。希望有人能解决这个奇怪的错误，因为所有代码都很好。

提前致谢。

【问题讨论】：

澄清一下，代码在物理上工作，但调试器只是无缘无故地中断？一般来说，我在使用 Visual Studio 调试 JavaScript 时运气不佳。在最近的版本中它变得更好了，但是告诉它不要因为 JavaScript 错误而中断并且只使用浏览器调试工具对我来说效果更好。
是的，代码在 IE 10 下首次运行时可以正常工作。单击链接时，调试器会中断。

标签： javascript jquery html asp.net-mvc asp.net-mvc-4

【解决方案1】：

表示在 jQuery 加载之前触发了一个 jQuery 函数。您确定所有必需的脚本都在您在页面开头加载的包中吗？此外，最好在页面末尾加载脚本（更好的性能）。

<html>
  <head> ... </head>
  <body>
    ...

    @Scripts.Render("~/bundles/jquery","~/bundles/modernizr")
    @RenderSection("scripts", required: false)
    <script type="text/javascript">
        $(function () {
            $("#test").append("<a href='#'>test linkje</a>");
        });
    </script>
  </body>
</html>

【讨论】：

Thijs，我在页面末尾有脚本（就像默认的 MVC4 模板一样）。出现了同样的问题，一些解决方案说尝试将其放在头部。