自定义 JQuery 显示：Uncaught ReferenceError: $ is not defined on modal

Question

问题背景：

我有一个简单的 ASP.NET MVC 站点，它使用 Bootstrap 来呈现具有九个面板的视图。每个面板上都有一个按钮，单击该按钮会产生一个模式弹出窗口。

问题：

如果我在包含的bootstrap.min.js file 中包含script link，那么我可以生成一个简单的模式弹出窗口。我的问题是我最终需要开始将参数传递给弹出窗口，因此我正在尝试开发我的 JQuery 解决方案。目前，当我单击视图中的面板按钮时，我可以从 Chrome 控制台看到我收到错误消息：

Uncaught ReferenceError: $ is not defined

代码：

注意：此视图基于一个主视图，其中 <script src="/Scripts/jquery-1.9.1.js"></script> 包含在定义的 bundles 中

    @{
        ViewBag.Title = "CIBuilds";
        Layout = "~/Views/Shared/_Layout.cshtml";

        <link rel="stylesheet" href="~/Content/bootstrap.min.css">
        <link rel="stylesheet" href="~/Content/bootstrap.css">
    }

    @Styles.Render("~/Content/css")

    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-md-4 col-lg-4">
                <div class="panel panel-default">
                    <div class="panel-heading">This Page is Disabled</div>
                    <div class="panel-body">
                        This page is temporarily disabled by the site administrator for some reason.<br>
                        <a href="#">Click here</a> to enable the page.
                        <a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal">Click to open Modal</a>
                    </div>
                </div>
            </div>

        //Other 8 panels

        </div>

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <h3>Modal Body</h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
    <script>

ERROR:***** Uncaught ReferenceError: $ is not defined
$(document).ready(function () {
    $(".btn").click(function () {
        $("#basicModal").modal("show");
    });
});

</script>

如果有人能帮我整理一下，那就太好了。

更新

我注释掉了主视图RenderSection 对已定义 JQuery 包的引用以及包本身。然后我添加了指向JQuery1.9.1.js 的链接，还尝试了1.9.1.min.js，但无济于事。

我也再次尝试了 JQuery-1.11.2.js 和 1.11.2.min.js，问题仍然存在。

我现在收到一条不同的错误消息：

 Uncaught TypeError: undefined is not a function

这是因为 .modal() 在 JQuery 中没有显示为有效方法 - 这可以解释 undefined function 错误消息，我应该使用什么脚本？

Answer 1

以与粘贴相同的方式运行脚本 sn-ps，在包含 JQuery 库之前，我会遇到与您在控制台中谈论的相同的错误。加载 JQuery 库后，错误就会消失。

您可能需要重新检查您的捆绑包以确保它们都正确链接，或者如果您使用的软件在前端阻止了 JQuery，您可能需要向您打算使用的库添加另一个链接。希望这可以帮助。

我想将此添加为评论，以便首先找到正确的解决方案，但我没有足够的排名。我会尝试在前端使用它，但是使用您想要使用的 JQuery 版本。

// 作者：Chris Coyer CSS 技巧

    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
    document.write(unescape("%3Cscript src='/js/jquery-1.4.2.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

编辑：

这里是没有库的小提琴http://jsfiddle.net/sf9knxx8/，你可以查看控制台找到你的错误。这是一个添加了库的http://jsfiddle.net/6f980kyc/，清除控制台并刷新您可以看到错误消失。

Answer 2

一定是$冲突！试试这个：

jQuery(document).ready(function () {
    jQuery(".btn").click(function () {
        jQuery("#basicModal").modal("show");
    });
});

而不是

$(document).ready(function () {
    $(".btn").click(function () {
        $("#basicModal").modal("show");
    });
});

Answer 3

只需在浏览器中打开viewsource即可查看

1：如果jquery是文件加载的（点击viewsource中的链接应该会打开jquery文件）

2 : 如果包含 jquery 的链接不止一个（请确保在您的捆绑包中关闭 EnableOptimization）

也可以尝试将 $ 替换为 JQuery

Answer 4

我在 Firefox 中使用他们的开发工具发现了这个错误。
我使用 MVC，并且能够通过移动解决此问题
我的@Scripts.Render() 调用之前在我的布局页面中调用@RenderBody()。