Uncaught ReferenceError: $ is not defined when loading bootstrap date time picker in mvc

Question

当我添加 bootstrap 日期时间选择器时，单击 "glyphicon glyphicon-calendar" 时日历未加载，已添加所有文件但显示错误：

Uncaught ReferenceError: $ is not defined at 1:417

查看页面：

<script src="~/Scripts/ckeditor/ckeditor.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">

 <div class="form-group">
        @Html.LabelFor(model => model.Date, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">         
            <div class="container">
                <div class="row">
                    <div class='col-sm-6'>
                        <div class="form-group">
                            <div class='input-group date' id='datetimepicker1'>
                                <input type='text' class="form-control" />
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(function () {
                            $('#datetimepicker1').datetimepicker();
                        });
                    </script>
                </div>
            </div>      

            @Html.ValidationMessageFor(model => model.Date, "", new { @class = "text-danger" })
        </div>
    </div>

BundleConfig.cs

bundles.Add(new StyleBundle("~/css/bootstrap").Include(
            "~/assets/css/bootstrap.min.css"
            ));
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            "~/assets/js/jquery.min.js"));

 bundles.Add(new ScriptBundle("~/bundles/moment").Include(
                   "~/Scripts/moment.js"));

        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
           "~/assets/js/jquery.min.js"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
            "~/assets/js/bootstrap.min.js",
            "~/assets/js/bootstrap-datetimepicker.min.js",
            "~/assets/js/slimscroll/jquery.slimscroll.min.js"
            ));

dafault.cshtml页（布局页）

 @Styles.Render("~/css/bootstrap")
 @Scripts.Render("~/bundles/moment")
 @Scripts.Render("~/bundles/jquery")
 @Scripts.Render("~/bundles/bootstrap")

为什么在单击 link 并在 $ jquery 中生成时没有加载日历，我想我已经正确地提供了代码和脚本。谁能帮我找到解决办法??

Answer 1

首先，将$('#datetimepicker1').datetimepicker();移动到$( document ).ready：

<script>
    $( document ).ready(function() {
        $('#datetimepicker1').datetimepicker();
    });
</script>

此外 - 您正在尝试在加载之前使用 JQuery 功能。

在你的 BundleConfig.cs 中，首先包括 JQuery：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            "~/assets/js/jquery.min.js"));
bundles.Add(new StyleBundle("~/css/bootstrap").Include(
            "~/assets/css/bootstrap.min.css"));
...
Other includes
...

然后在您的 dafault.cshtml 页面中，更改呈现顺序并将 bootstrap css 留在最后：

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/moment")
@Styles.Render("~/css/bootstrap")

Answer 2

对于js文件我推荐你使用requirejs

Uncaught ReferenceError: $ is not defined when loading bootstrap date time picker in mvc

Uncaught ReferenceError: $ is not defined when loading bootstrap date time picker in mvc

javascript

asp.net-mvc

jquery

asp.net-mvc-4

bootstrap-datetimepicker