未捕获的类型错误：$(...).datepicker 不是函数（匿名函数）

Question

我发现堆栈溢出的答案很少，但仍然无法解决我的问题。 我在 Django 上运行，但我认为它与此错误无关。

我尝试让我的日期选择器 java 脚本工作，但我收到了错误

1:27 Uncaught TypeError: $(...).datepicker is not a function(anonymous function) @ 1:27fire @ jquery-1.9.1.js:1037self.fireWith @ jquery-1.9.1.js: 1148jQuery.extend.ready@jquery-1.9.1.js:433完成@jquery-1.9.1.js:103 jquery-2.1.0.min.js:4 XHR 完成加载：POST "https://localhost:26143/skypectoc/v1/pnr/parse".l.cors.a.crossDomain.send @ jquery-2.1.0.min.js:4o.extend.ajax @ jquery- 2.1.0.min.js:4PNR.findNumbers@pnr.js:43parseContent@contentscript.js:385processMutatedElements@contentscript.js:322

这是我所有的脚本：

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('.dateinput').datepicker({ format: "yyyy/mm/dd" });
}); 
</script>

      <!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="http://getbootstrap.com/assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
 <script type="text/javascript">
              $(document).ready(function() {
                  $("#extra-content").hide();
                  $("#toggle-content").click(function(){
                      $("#extra-content").toggle();
                  });
              });
 </script>            

任何反馈将不胜感激

Answer 1

出了什么问题？

当你第一次包含 jQuery 时：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

第二个脚本将自己插入到 jQuery 中，并“添加”$(...).datepicker。

但是你又一次包含了 jQuery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

它撤消插入，因此$(...).datepicker 变为未定义。

虽然第一个$(document).ready块出现在这之前，但匿名回调函数体直到所有脚本加载完毕后才执行，此时$(...)（准确来说是window.$）指的是最近加载的jQuery .

如果您立即调用$('.dateinput').datepicker 而不是在$(document).ready 回调中调用，您不会遇到这种情况，但是您需要确保目标元素（使用类dateinput）之前已经在文档中脚本，一般建议使用ready回调。

解决方案

如果你想使用 jquery-ui 中的datepicker，最好在 after bootstrap 之后包含 jquery-ui 脚本。 jquery-ui 1.11.4 与 jquery 1.6+ 兼容，因此可以正常工作。

或者（特别是如果您没有将 jquery-ui 用于其他任何事情），您可以尝试bootstrap-datepicker。

Answer 2

如果您使用的是 ASP.NET MVC

打开布局文件“_Layout.cshtml”或您的自定义文件

在你看到的代码部分，如下：

@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
@Scripts.Render("~/bundles/jquery")

删除行“@Scripts.Render("~/bundles/jquery")”

（在您看到的代码部分）作为 latest 行过去，如下所示：

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

这对我有帮助，希望对你也有帮助。

Answer 3

您只需要添加三个文件和两个 css 链接。您也可以使用cdn。 js 文件和 css 文件的链接如下：-

1. jQuery.dataTables.min.js
2. dataTables.bootstrap.min.js
3. dataTables.bootstrap.min.css
4. bootstrap-datepicker.css
5. bootstrap-datepicker.js

如果您在项目中使用引导程序，它们是有效的。

我希望这会对你有所帮助。 问候， 维韦克·辛格拉

Answer 4

错误是因为您在两个地方包含脚本链接，这将覆盖和重新初始化日期选择器

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('.dateinput').datepicker({ format: "yyyy/mm/dd" });
}); 
</script>

      <!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

所以排除 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"

或 src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"

它会起作用的..

Answer 5

包含对 Jquery 库的多个引用是错误的原因仅包含对 Jquery 库的一个引用，这将解决问题

Answer 6

出现此错误，因为未定义函数。 在我的情况下，我调用了 datepicker 函数，但没有包含 datepicker js 文件，当时我得到了这个错误。