jQuery 插件不起作用……“类型错误：'undefined' 不是函数”
[英]jQuery plugins not working… “Type Error: 'undefined' is not a function”
问题描述
I have a Ruby Rails application which utilizes jQuery, and am trying to load plugins but it is not working;
我有一个使用 jQuery 的 Ruby Rails 应用程序，我正在尝试加载插件但它不起作用； the scripts are loaded in the "correct" order (ie, jquery, jquery_ujs, plugins, own scripts) but any plugin function (specifically testing niceScroll and jScrollPane) fails with "Type Error: 'undefined' is not a function".脚本以“正确”的顺序加载（即，jquery、jquery_ujs、插件、自己的脚本），但任何插件函数（特别是测试 niceScroll 和 jScrollPane）都失败并显示“类型错误：‘未定义’不是函数”。 In Web Inspector I can see that the plugin scripts are loaded successfully after the jQuery script, but I simply cannot get it to work.在 Web Inspector 中，我可以看到插件脚本在 jQuery 脚本之后成功加载，但我根本无法让它工作。
jQuery itselt works completely fine, and in fact Turbolinks and jQuery turbolinks works fine as well. jQuery itelt 完全可以正常工作，事实上 Turbolinks 和 jQuery turbolinks 也可以正常工作。 However, trying to call " $('.something').niceScroll " (or any other plugin) yields the above-mentioned type error.但是，尝试调用“ $('.something').niceScroll ”（或任何其他插件）会产生上述类型错误。
Here is my aplication.js:这是我的应用程序.js：
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require jquery.turbolinks
//= require socket.io
//= require jquery.jscrollpane.min
//= require jquery.mousewheel
//= require auctions
Which, when placed in the application layout, yields this (partial) html:其中，当放置在应用程序布局中时，会产生这个（部分）html：
<head>
<title>Slamlaunch</title>
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css">
<link href="/assets/active_admin.css?body=1" media="all" rel="stylesheet" type="text/css">
<link href="/assets/auctions.css?body=1" media="all" rel="stylesheet" type="text/css">
<link href="/assets/marketing/marketing.css?body=1" media="all" rel="stylesheet" type="text/css">
<link href="/assets/patches.css?body=1" media="all" rel="stylesheet" type="text/css">
<link href="/assets/products.css?body=1" media="all" rel="stylesheet" type="text/css">
<link href="/assets/sessions.css?body=1" media="all" rel="stylesheet" type="text/css">
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-transition.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-affix.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-button.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-modal.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-tab.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-popover.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/turbolinks.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.turbolinks.js?body=1" type="text/javascript"></script>
<script src="/assets/socket.io.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.jscrollpane.min.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.mousewheel.js?body=1" type="text/javascript"></script>
<script src="/assets/auctions.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param">
<meta content="LzMLqv0Sb7+89JGe0U5x2ZGkECJ4l1gfbiD/81jFJD4=" name="csrf-token">
</head>
Also, yes, all of the relevant code is executed either in a $(function(){}) block or in the console, long after all libraries are loaded.此外，是的，所有相关代码都在 $(function(){}) 块或控制台中执行，在加载所有库之后很久。
2 个解决方案
解决方案1
4 2013-01-23 15:49:14
This problem arises mostly because of incorrect loading of script which according to you isn't your case这个问题的出现主要是因为脚本加载不正确，根据您的情况，这不是您的情况
try putting all the code inside a尝试将所有代码放在一个
$(function(){
//your code
})
also check to see the jquery isn't being downloaded twice还要检查 jquery 没有被下载两次
解决方案2
0 2019-10-30 04:26:19
Try putting all your codes inside the following enclosure.尝试将所有代码放入以下外壳中。 It works then, worked for me.然后它起作用了，对我有用。 Might be the problem that plugins might not be loaded fully, so for that "$(document).ready(function(){})" is called.可能是插件可能没有完全加载的问题，因此调用了“$(document).ready(function(){})” 。 After that it works like a charm.之后它就像一个魅力。
(function($){
$(document).ready(function(){
//Your plugin functions to be called here.
});
})(jquery);
If you use "$(document).ready(function(){})" in the following如果在下面使用“$(document).ready(function(){})”
$(function(){});
It won't work.它不会工作。 Don't know why.不知道为什么。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.