未捕获的引用错误:应用引导模板后未定义 $

Posted

技术标签:

【中文标题】未捕获的引用错误:应用引导模板后未定义 $【英文标题】:Uncaught ReferenceError: $ is not defined after applying Bootstrap Template 【发布时间】:2020-01-15 17:42:01 【问题描述】:

我正在开发一个 MVC 项目。我下载了一个名为 argon 的引导主题并尝试与 MVC 集成。我在 Bundle.Config 中引用了所有与 Argon 相关的 css 和 javascript 文件。 我认为它已成功集成,并且我现在可以使用所有 argon html 元素。 问题是我无法正确使用 jquery 函数。我在所有其他插件的顶部添加了 jquery 参考。但总是得到这个错误 - “未捕获的 ReferenceError:$ 未定义”。 我搜索了一下,我知道这是很常见的问题,但没有找到合适的解决方案。 不知道我在哪里犯了错误。

Any suggestion would be helpful. TIA.


This is what I have tried - 

Bundle Config File :

            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-version.js",
                        "~/Argon/assets/vendor/jquery/jquery.min.js",
                        "~/Argon/assets/js/argon.min.js",
                        "~/Argon/assets/vendor/popper/popper.min.js",
                        "~/Argon/assets/vendor/bootstrap/bootstrap.min.js",
                        "~/Argon/assets/vendor/headroom/headroom.min.js",
                        "~/Argon/assets/vendor/onscreen/onscreen.min.js",
                        "~/Argon/assets/vendor/nouislider/js/nouislider.min.js",
                        "~/Argon/assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js"
                        ));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/argon/assets/vendor/bootstrap/bootstrap.js",
                      "~/argon/assets/vendor/bootstrap/bootstrap.min.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));

            bundles.Add(new StyleBundle("~/Content/argon").Include(
                "~/Argon/assets/css/argon.min.css",
                "~/Argon/assets/css/bootstrap/bootstrap-grid.min.css",
                "~/Argon/assets/css/bootstrap/bootstrap-reboot.min.css",
                "~/Argon/assets/vendor/bootstrap-datepicker/css/bootstrap-datepicker.min.css",
                "~/Argon/assets/vendor/font-awesome/css/font-awesome.min.css",
                "~/Argon/assets/vendor/nouislider/css/nouislider.min.css",
                "~/Argon/assets/vendor/nucleo/css/nucleo-svg.css",
                "~/Argon/assets/vendor/nucleo/css/nucleo.css"
                ));



THE LAYOUT PAGE:


    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/argon")
    @Scripts.Render("~/bundles/modernizr")

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

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



THE INDEX PAGE:

@
    ViewBag.Title = "Home Page";



<div>
    <div class="form-group">
        <div class="input-group input-group-alternative">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="ni ni-calendar-grid-58"></i></span>
            </div>
            <input class="form-control datepicker" id="dtTime" placeholder="Select date" type="text"/> 
            <button type="button" id="btnDate" class="btn btn-outline-default">Default</button>
        </div>
    </div>


</div>


<script type="text/javascript">
    $(document).ready(function () 
        $("#btnDate").on('click', function (e) 
           var dtval = $('.datepicker').val();
           console.log(dtval);
        );

    );

</script>

【问题讨论】:

【参考方案1】:

我不需要为此鼓掌,但补充一下:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

在您的&lt;script&gt; 标签之前或&lt;head&gt;&lt;/head&gt;

【讨论】:

是的..你是...现在就像一个魅力...谢谢! 道歉...不知道我不能将两个答案标记为已接受..您是第一个回答的人..【参考方案2】:

Uncaught ReferenceError: $ is not defined 是因为在加载页面时缺少jQuery js。如果您有一个母版页示例:_Layout.chtml,请在 &lt;body&gt; 中添加以下 js 文件,因此它可用于具有此布局的每个页面。

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】:

@JK1990 乐于提供帮助,不要忘记将回复标记为已接受,以便让未来的访问者清楚了解;) 最严重的抄袭!【参考方案3】:

如果您有母版页示例:

_Layout.chtml

您必须将代码放入要呈现的每个页面中

@section Scripts

    <script type="text/javascript">
        $(document).ready(function () 
            console.log("ready!");

            $("#Pdf").click(function () 
                alert("pdf button");
                window.open('../Home/PrintStudent?param=1', '_blank');
            );
        );

    </script>

【讨论】:

以上是关于未捕获的引用错误:应用引导模板后未定义 $的主要内容,如果未能解决你的问题,请参考以下文章

未捕获的类型错误:未定义不是日期选择器引导程序的函数

Bootstrap 设置错误:未捕获 ReferenceError:未定义 jQuery 和未捕获错误:Bootstrap 的 JavaScript 需要 jQuery

未捕获的引用错误:未定义 Toastify

NodeJS - 未捕获的引用错误:未定义原始

安装 MailChimp 弹出 js 时出现未捕获错误:引导工具提示需要 Tether 和未捕获 ReferenceError:未定义 Cookie

上传测试后未定义 AirConsole View Manager