未捕获TypeError:$(...)。datepicker不是一个函数(匿名函数)
我发现堆栈溢出的答案很少,但仍然无法解决我的问题。
我正在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.