jquery - 未捕获的引用错误:应用引导模板后未定义 $
问题描述
我正在做一个 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>© @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>
解决方案
我不需要为此鼓掌,但补充说:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
在您的<script>
标签之前或在<head></head>
推荐阅读
- python - 为什么mysql用户定义的变量在python中不起作用?
- dolphindb - 该程序在 GUI 中执行,但网页端的作业未完成
- excel - 提取多个文本文件中两个字符之间的数据并重命名它们
- django - 如何使用 mod_wsgi 和 SSL 将 Http 协议定向到 Django 中的 Https 协议?
- sql - 如何使用 Lumen 计算 PostgreSQL 中的数据在字段中显示 count_apply
- python - Python Selenium:无法在亚马逊上找到元素
- flutter - Flutter 2 BottomNavigationBar 不显示第二项的标签
- azure - 如何使用 docker 映像将 netbox 部署到 azure app 服务?
- python - df_valid 的 IndexError
- android - RadioButton 外发光在开始时被切断