1

我有一个使用 jQuery 的 Ruby Rails 应用程序，我正在尝试加载插件，但它不工作；脚本以“正确”顺序加载（即 jquery、jquery_ujs、插件、自己的脚本），但任何插件函数（特别是测试 niceScroll 和 jScrollPane）都会失败，并显示“类型错误：‘未定义’不是函数”。在 Web Inspector 中，我可以看到插件脚本在 jQuery 脚本之后成功加载，但我根本无法让它工作。

jQuery itselt 工作得很好，事实上 Turbolinks 和 jQuery turbolinks 也工作得很好。但是，尝试调用“ $('.something').niceScroll”（或任何其他插件）会产生上述类型错误。

这是我的应用程序.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

其中，当放置在应用程序布局中时，会产生这个（部分）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>

另外，是的，所有相关代码都在 $(function(){}) 块或控制台中执行，在所有库加载很久之后。

4

2 回答 2

4

出现此问题主要是因为脚本加载不正确，根据您的情况，
尝试将所有代码放入

$(function(){
//your code
})

还要检查一下 jquery 没有被下载两次

于 2013-01-23T15:49:14.120 回答
0

尝试将所有代码放入以下外壳中。然后它起作用了，对我有用。可能是插件可能没有完全加载的问题，因此调用了“$(document).ready(function(){})”。之后，它就像一个魅力。

 (function($){

    $(document).ready(function(){

    //Your plugin functions to be called here.

    });


    })(jquery);

如果你在下面使用“$(document).ready(function(){})”

$(function(){});

它行不通。不知道为什么。

于 2019-10-30T04:26:19.453 回答