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

Question

问题背景:

我有一个简单的 ASP.NET MVC 站点，使用 Bootstrap 来渲染具有九个面板的 View 。每个面板上都有一个按钮，单击该按钮时应生成模式弹出窗口。

问题:

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

Uncaught ReferenceError: $ is not defined

代码:

注意:此 View 基于具有 <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

按照粘贴的方式运行脚本片段，在包含 JQuery 库之前，我会收到与您在控制台中讨论的相同的错误。一旦加载 JQuery 库，错误就会消失。

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

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

// By Chris Coyer CSS-Tricks

    <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>

编辑:

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