未捕获的TypeError:$(...).datepicker不是函数(匿名函数)

Question

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

我尝试使我的日期选择器java脚本工作,但我收到错误

1:27 Uncaught TypeError:$(...).datepicker不是函数(匿名函数)@ 1:27fire @jquery-1.9.1.js:1037self.fireWith @jquery-1.9.1.js:1148jQuery.extend .ready @jquery-1.9.1.js:433completed @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回调.

解

如果你想datepicker从jquery-ui中使用,那么在 bootstrap 之后包含jquery-ui脚本可能是最有意义的.jquery-ui 1.11.4与jquery 1.6+兼容,所以它可以正常工作.

或者(特别是如果你没有使用jquery-ui),你可以试试bootstrap-datepicker.