jQuery 类型错误：$(...).owlCarousel 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21661292/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TypeError: $(...).owlCarousel is not a function
提问by Xavi Alsina
I am having troubles adding this carousel to my prestashop template.
我在将此轮播添加到我的 prestashop 模板时遇到了麻烦。
It returns me the following error:
它返回以下错误：
TypeError: $(...).owlCarousel is not a function navigation : true
TypeError: $(...).owlCarousel 不是函数导航：true
And the code using to initialize it is this one
用于初始化它的代码是这个
$(document).ready(function() {
$("#owl-demo").owlCarousel({
navigation : true
});
});
I am trying to solve it, but seems imposible, since on an empty html page it works but not when I use it on the Prestashop.
我正在尝试解决它，但似乎不可能，因为在一个空的 html 页面上它可以工作，但当我在 Prestashop 上使用它时却无法解决。
Any clue?
有什么线索吗？
Thanks.
谢谢。
回答by Manoj Verma
Add owl.carousel.min.jsfile in your home page and before the file in which you are using add the following code:
owl.carousel.min.js在您的主页中和您正在使用的文件之前添加文件，添加以下代码：
$("#owl-demo").owlCarousel({
navigation : true
});
Then only it will work.
那么只有它会起作用。
回答by Tom
You will get this error if the jquery file is loading after the owl carousel file.
如果在 owl carousel 文件之后加载 jquery 文件，您将收到此错误。
(Make sure your reference to jquery is above the owl carousel reference js file)
（确保您对 jquery 的引用高于 owl carousel 引用 js 文件）
回答by Nolwennig
If JavaScript files loading is affected by some latency, you can check if function is defined before call it.
如果 JavaScript 文件加载受到一些延迟的影响，您可以在调用之前检查函数是否已定义。
Check with jQuery.isFunction
if($.isFunction('owlCarousel')){
$("#owl-demo").owlCarousel({
navigation : true
});
}
Check with JavaScript typeof operator
if(typeof owlCarousel === 'function') {
$("#owl-demo").owlCarousel({
navigation : true
});
}
回答by user2831723
Try to use {literal} {/literal} tags. It's usually reccomanded to put javascript inside those tags in .tpl files (smarty) . Javascript might work without the tags but can sometimes return a error ( like in your case )
尝试使用 {literal} {/literal} 标签。通常建议将 javascript 放入 .tpl 文件 (smarty) 中的这些标签中。Javascript 可能在没有标签的情况下工作，但有时会返回错误（就像你的情况一样）
BR's
BR的
回答by MD Ashik
The reason sometime html executed inline script before external script loaded perfectly.
I get solution by this way .
I just added deferattribute to my owl.carouselsourcecalling like ..
有时 html 在外部脚本完美加载之前执行内联脚本的原因。我通过这种方式得到解决方案。我只是在我的调用中添加了defer属性，owl.carouselsource例如 ..
<script defer src="plugins/OwlCarousel2.3/owl.carousel.min.js"></script>
<script defer src="plugins/OwlCarousel2.3/owl.carousel.min.js"></script>
Documentation about defer attribute --> att_script_defer-link
关于 defer 属性的文档 --> att_script_defer-link
回答by Vuyani Daweti
I had the same problem. Just add the js file right above your function
我有同样的问题。只需在函数上方添加 js 文件
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<!--DO NOT ENTER ANY EXTERNAL LINK IN BETWEEN-->
<script type="text/javascript">
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
});
});
</script>
回答by Gowthaman D
Add Your Jqueryfile and owl.jsfile to header section
将您的Jquery文件和owl.js文件添加到标题部分
