Jquery 函数未加载 - 未定义不是函数答案

【问题标题】：Jquery function doesn't load - undefined is not a functionJquery 函数未加载 - 未定义不是函数
【发布时间】：2014-12-09 13:12:08
【问题描述】：

我正在尝试为引导安装此日期时间选择器： https://github.com/Eonasdan/bootstrap-datetimepicker/wiki/Installation

我的文档标题中有这个：

    <script src="/js/jquery-1.11.1.min.js"></script>
    <script src="/js/moment.min.js"></script>

并且在页脚中：

    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/bootstrap-datetimepicker.min.js"></script>

这里是使用选择器的代码：

                <div class="form-group">
                    <div class='input-group date' >
                        <input type='text' name="picker" class="form-control" id='datetimepicker'/>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                </div>

            <script type="text/javascript">
                $(function () {
                    $('#datetimepicker').datetimepicker();
                });
            </script>

问题在于 .datetimepicker 是一个“未解决的函数”。为什么？

编辑：

IDE (PHPStorm) 说它是未解析的函数。并在 Chrome 中实际运行它确认：

    bootstrap-datetimepicker.min.js:1 Uncaught TypeError: undefined is not a function
    myfile.php:42 Uncaught TypeError: undefined is not a function
    bootstrap-datetimepicker.min.js:1 Uncaught Error: Must choose at least one picker

Edit2：我更新了页眉/页脚。标题：

页脚：

<script src="/js/bootstrap.min.js"></script>
<script src="/js/moment.min.js"></script>
<script src="/js/bootstrap-datetimepicker.min.js"></script>
<script src="/js/bootstrap-rowlink.js"></script>
<script src="/js/myscripts.js"></script>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker').datetimepicker();
    });
</script>

现在 IDE 将 datetimepicker() 识别为一个函数，但在 Chrome 中仍然存在同样的问题！（见上文）

【问题讨论】：

你能告诉我完整的源代码吗？我认为您的错误不会发生在浏览器中。
用firebug检查js文件是否正确加载
完整的源代码有点“敏感”，但我会尝试删除敏感的东西并稍后发布源代码。

标签： javascript jquery twitter-bootstrap bootstrap-datetimepicker

【解决方案1】：

尝试在标题中仅包含 jQuery：

<link rel="stylesheet" type="text/css" media="screen" href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>

这些在页脚：

<script type="text/javascript" src="scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="scripts/moment.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/master/src/js/bootstrap-datetimepicker.js"></script>

作者使用 jQuery 2.1.1，因此他的插件可能依赖于该版本。

编辑

我也无法让它工作。但是，自从 Moment.js 更新到 2.8.4 版本后，在其 Github 页面上创建了一些问题。试试Smalot's Bootstrap Datepicker。它也维护得很好，对我有用。

【讨论】：

我尝试将 jquery 2.1.1 添加到页眉并将其余部分移到页脚。请参阅我的帖子的edit2。还是不行！
@JamesB 查看我的编辑。可能是插件不能很好地与 momentjs 配合使用（我确信它是临时的，因为 github 页面列出了最近的更改）而且我不知道它什么时候会修复。我推荐了另一个不错的日期选择器。
你链接的那个是完美的！采摘时间对我来说很重要，而且采摘时间看起来很棒。谢谢！我不再进行故障排除，只是假设您是对的，这实际上是时刻或脚本本身的问题。我之前实现了一个不同的时间选择器，没有任何问题。

【解决方案2】：

我认为你打电话给$('#datetimepicker').datetimepicker(); 太早了，你应该这样组织你的代码：

<script src="/js/bootstrap.min.js"></script>
<script src="/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
                $(function () {
                    $('#datetimepicker').datetimepicker();
                });
</script>

【讨论】：

这实际上是您遇到的问题，与我之前遇到的类似问题。
我尝试将其添加到末尾，但没有帮助:(
问题不在于对$('#datetimepicker').datetimepicker(); 的调用，而是在插件声明中，尝试使用 bootstrap-datetimepicker.js 的非缩小版本并（再次）更新您的问题

【解决方案3】：

尝试在文档就绪时调用该函数

<script type="text/javascript">
   $(document).ready(function () {
       $('#datetimepicker').datetimepicker();
   });
</script>

【讨论】：

将函数直接传递给 jQuery 函数（即$(function() {...})）是文档就绪处理程序的简写，因此他们的代码已经这样做了。

【解决方案4】：

查看作者site的示例

你用错了，你需要引用封闭的 div 而不是你的输入元素。

您的 HTML 应如下所示：

              <div class="form-group">
                    <div class='input-group date' id='datetimepicker' >
                        <input type='text' name="picker" class="form-control"/>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                </div>

【讨论】：