未捕获TypeError：$（...）。datepicker不是一个函数（匿名函数） [英] Uncaught TypeError: $(...).datepicker is not a function(anonymous function)

问题描述

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

I found few answers on stack overflow but still cant resolve my problem. I am running on Django but I dont think it is relevant for this error.

我尝试让我的日期选择器java脚本工作，但我正在错误

I try to make work my date picker java script but I am getting the error

1:27未捕获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

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:433completed @ jquery-1.9.1.js:103 jquery-2.1.0.min.js:4 XHR finished loading: 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>            

任何反馈将非常感谢

推荐答案

出了什么问题？

第一次包含jQuery时：

What went wrong?

When you include jQuery the first time:

<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 。

The second script plugs itself into jQuery, and "adds" $(...).datepicker.

但是，您再次包括jQuery：

But then you are including jQuery once again:

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

它会撤消插入，因此 $（...）datepicker 成为未定义。

It undoes the plugging in and therefore $(...).datepicker becomes undefined.

尽管第一个 $（document）.ready 那个匿名回调函数体不会被执行，直到所有的脚本都被加载，然后再被 $（...）（ code>是精确的）指的是最近加载的jQuery。

Although the first $(document).ready block appears before that, the anonymous callback function body is not executed until all scripts are loaded, and by then $(...) (window.$ to be precise) is referring to the most recently loaded jQuery.

如果你调用 $（ '.dateinput'）。datepicker 立即而不是 $（document）.ready 回调，但是你需要确保目标元素（类 dateinput ）已经在脚本之前的文档中，通常建议使用准备好回调。

You would not run into this if you called $('.dateinput').datepicker immediately rather than in $(document).ready callback, but then you'd need to make sure that the target element (with class dateinput) is already in the document before the script, and it's generally advised to use the ready callback.

如果您要使用 datepicker 从jquery-ui，在 bo之后包含jquery-ui脚本可能是最有意义的otstrap。 jquery-ui 1.11.4与jquery 1.6+兼容，所以它可以正常工作。

If you want to use datepicker from jquery-ui, it would probably make most sense to include the jquery-ui script after bootstrap. jquery-ui 1.11.4 is compatible with jquery 1.6+ so it will work fine.

或者（特别是如果你没有使用jquery-ui做任何事情）您可以尝试引导日期标记。

Alternatively (in particular if you are not using jquery-ui for anything else), you could try bootstrap-datepicker.

这篇关于未捕获TypeError：$（...）。datepicker不是一个函数（匿名函数）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！