Question

我在控制台中遇到错误：

$ is not defined

当我尝试使用bootstrap datetimepicker

时

这是我的风格链接：

<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/bootstrap-datetimepicker-master/build/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="css/style.css">

这是脚本链接：

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/moment-develop/moment.js"></script>
<script src="bower_components/bootstrap/js/transition.js"></script>
<script src="bower_components/bootstrap/js/collapse.js"></script>
<script src="bower_components/bootstrap/bootstrap-datetimepicker-master/build/js/bootstrap-datetimepicker.min.js"></script>

这里我使用的是datetimepicker表单：

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker2'>
                    <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 () {
                $('#datetimepicker2').datetimepicker({
                    locale: 'ru'
                });
            });
        </script>
    </div>
</div>

你能帮我解决这个问题吗？

Answer 1

由于您要在end of the body加载脚本，因此最好将<script>标记从body内部移动到这些标记之后，或者加载<head>中的脚本你的HTML部分：

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/moment-develop/moment.js"></script>
<script src="bower_components/bootstrap/js/transition.js"></script>
<script src="bower_components/bootstrap/js/collapse.js"></script>
<script src="bower_components/bootstrap/bootstrap-datetimepicker-master/build/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker2').datetimepicker({
            locale: 'ru'
        });
    });
</script>

现在这肯定会奏效。只有在加载jQuery库之后才应调用$和jQuery函数，这是一个顺序过程。

如果你也有一个公共的页眉/页脚，可以安全地添加上面的代码，因为jQuery仅在#datetimepicker2元素上检查和执行，只有它在那里。

bootstrap datetimepicker：$未定义

1 个答案: