未捕获的 TypeError: $(...).flexslider 不是使用 gulp 和 bower 的函数答案

【问题标题】：Uncaught TypeError: $(...).flexslider is not a function using gulp and bower未捕获的 TypeError: $(...).flexslider 不是使用 gulp 和 bower 的函数
【发布时间】：2016-11-16 14:12:03
【问题描述】：

我目前在我的网站上配置 flexslider 时遇到问题。我正在使用长生不老药 laravel 和 bower。

我已经编译了所有的 scss、less 和 js 文件，但是当我在主页上添加与滑块相关的任何代码时，我得到了这个错误：

Uncaught TypeError: $(...).flexslider is not a function using

我的页面上似乎什么都没有显示

我在 layout.blade 文件中添加了 javascript 只是为了测试

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Creative Forces Enrichment</title>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" href="{{ elixir('css/app.css') }}">
   <link rel="stylesheet" href="{{ elixir('css/style.css') }}">
</head>
    <body id="app-layout">
        <div class="line"></div>
        <header id="header" role="banner">
 <div class="container">

                   <!--    <button class="hamburger hamburger--collapse" type="button">
                        <span class="hamburger-box">
                            <span class="hamburger-inner"></span>
                        </span>
                    </button> -->
<div class="container text-xs-center">
  <nav class="nav nav-inline">
    <a class="nav-link" href='{{ url("/") }}'>Home</a>
    <a class="nav-link" href='{{ url("/team") }}'>Our Team</a>
    <a class="nav-link" href='{{ url("/media") }}'>Media</a>
    <a href='{{ url("/") }}' class="nav-link"><img src="./images/zipzap.png" alt=""></a>
    <a class="nav-link" href='{{ url("/about") }}'>About Us</a>
    <a class="nav-link" href='{{ url("/contact") }}'>Contact Us</a>
    <a class="nav-link" href='{{ url("/donate") }}' id="donate">Support Us</a>
  </nav>   
</div>
    </div>
   </header>


        @yield('content')
        <div class="container">
        <div class="row">
        <div class="text-xs-center spacing">

             <hr>

    <div class="text-center copy">&copy; Zip Zap Zop Enrichment <?php echo date("Y") ?></div>

 </div>

         </div>
     </div>

        <!-- JavaScripts -->
         <script src="{{ elixir('js/app.js') }}" type="text/javascript"></script>


     <script type="text/javascript">
        var metaslider_158 = function($) {
            $('#metaslider_158').addClass('flexslider'); // theme/plugin conflict avoidance
            $('#metaslider_158').flexslider({ 
                slideshowSpeed:3000,
                animation:"fade",
                controlNav:false,
                directionNav:false,
                pauseOnHover:true,
                direction:"horizontal",
                reverse:false,
                animationSpeed:600,
                prevText:"&lt;",
                nextText:"&gt;",
                slideshow:false
            });
        };
        var timer_metaslider_158 = function() {
            var slider = !window.jQuery ? window.setTimeout(timer_metaslider_158, 100) : !jQuery.isReady ? window.setTimeout(timer_metaslider_158, 1) : metaslider_158(window.jQuery);
        };
        timer_metaslider_158();
    </script>




    </body>
</html>

这是我希望滑块显示的页面：

@extends('layout')

@section('content')

<!-- Place somewhere in the <body> of your page -->
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
  <ul class="slides">
    <li>
      <iframe id="player_1" src="http://player.vimeo.com/video/39683393?api=1&player_id=player_1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    </li>
    <li>
      <img src="./images/maja.jpg" />
    </li>
    <li>
      <img src="./images/maja.jpg" />
    </li>
    <li>
      <img src="./images/maja.jpg" />
    </li>
  </ul>
</div>
<div class="container">
    <div class="content-wrapper">
        <div class="color-wrapper">
            <div class="main-container">
                <div class="gdlr-item gdlr-post-slider-item style-post-right post-slider"></div>
            </div>
        </div>
    </div>
</div>


@endsection

这是我的 gulp.js 文件

var elixir = require('laravel-elixir');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(function(mix) {
    // Copy Styles
    mix.copy('bower_components/bootstrap/scss/', 'resources/assets/sass/libraries/bootstrap/')
       .copy('bower_components/css-hamburgers/_sass/hamburgers', 'resources/assets/sass/libraries/hamburgers/')
       .copy('bower_components/flexslider/css', 'resources/assets/less/libraries/flexslider/')

    // Copy Scripts
    .copy('bower_components/jquery/dist/jquery.js', 'resources/assets/js/libraries/jquery.js')
    .copy('bower_components/bootstrap/dist/js/bootstrap.js', 'resources/assets/js/libraries/bootstrap.js')
    .copy('bower_components/flexslider/jquery.flexslider.js', 'resources/assets/js/libraries/flexslider.js')


    // Compile App Assets
    .sass('app.scss','public/css/app.css')
    .less('app.less','public/css/style.css')

    .scripts([
    'libraries/jquery.js',
    'libraries/bootstrap.js',
    'libraries/flexslider.js',
    'app/**/*.js'
    ], 'public/js/app.js', 'resources/assets/js')

    // Create version
    .version(['css/app.css', 'css/style.css', 'js/app.js']);
});

任何帮助将不胜感激！

【问题讨论】：

确保 jquery 包含在所有 js 的顶部
是的。我先安装好了
现在我在引导之前添加了 flexslider，错误消失了，但由于某种原因我的滑块没有出现
也许对你有帮助

标签： javascript jquery laravel bower laravel-elixir

【解决方案1】：

出于兼容性原因，您应该像这样包装您的 jQuery 代码：

(function($){

  // jQuery code is in here

})(jQuery);

【讨论】：

【解决方案2】：

在执行之前，您需要确保文档已完全加载，否则 app.js 中的 JavaScript 实际上可能需要比预期更长的时间才能包含您的库，这将导致此错误。

相反，我们既可以将$ 别名为jQuery，也可以像这样使用bind to the .ready() 处理程序：

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

这减少了在闭包中将jQuery 别名为$ 的需要，然后在其中执行就绪函数。

【讨论】：