未捕获的类型错误：jQuery(...).select2 不是 Laravel 5.3 的函数

Posted 2023-03-14

【中文标题】未捕获的类型错误：jQuery(...).select2 不是 Laravel 5.3 的函数

【英文标题】：Uncaught TypeError: jQuery(...).select2 is not a function Laravel 5.3

【发布时间】：2017-03-05 22:23:45

【问题描述】：

我正在使用 Select2 并看到以下错误。这是我的文件：

@extends('layouts.app')
<link rel="stylesheet" type="text/css" href="URL::asset('css/select2.min.css')">

    @section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Dashboard</div>

                    <div class="panel-body">
                         <select name="primaryLanguage" id="primaryLanguage">
                          <option value="AL">Alabama</option>
                          <option value="WY">Wyoming</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endsection
    <script type="text/javascript" src="URL::asset('js/jquery-1.10.2.js')"></script>
    <script type="text/javascript" src="URL::asset('js/select2.full.min.js')"></script>
    <script type="text/javascript">
        jQuery(document).ready(function()
            jQuery("primaryLanguage").select2();
        );
    </script>

我不断收到的错误：

home:7 Uncaught TypeError: jQuery(...).select2 is not a function(anonymous function) @ home:7fire @ jquery-1.10.2.js:3101self.fireWith @ jquery-1.10.2.js:3213jQuery.extend.ready @ jquery-1.10.2.js:3425completed @ jquery-1.10.2.js:3455
jquery-1.9.0.js:1 '//@ sourceURL' and '//@ sourceMappingURL' are deprecated, please use '//# sourceURL=' and '//# sourceMappingURL=' instead.

【问题讨论】：

你的 jquery 没有加载

可能 404 检查控制台

发布你是如何包含 jQuery 和 select2 插件的，因为它似乎没有在 jQuery 加载时加载插件。

检查控制台看看你有没有 404

并确保你没有加载 jquery 两次

【参考方案1】：

我刚遇到你自己的问题，我是这样解决的： 把这些

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/js/select2.min.js"></script>

在你的主布局文件中（在我的例子中是 app.blade.php） 然后在那些脚本下 @yield('scripts') 然后在你要调用插件的刀片文件中，在

之后

@section('content') 
...
@endsection
@section('scripts')
 <!-- Here you call the select2 js plugin -->
@endsection

PS：css文件&js文件必须放在public文件夹下（public/css&public/js） 在这里我使用 Laravel Collective 的形式 希望能帮到你

【参考方案2】：

尝试修改这个，

<script type="text/javascript">
   jQuery(document).ready(function()
       jQuery("#primaryLanguage").select2();
   );
</script>

在您的代码中，您指的是名称为primaryLanguage 的标签。但实际上它是一个id。因此，您缺少# 来指定具有特定“id”的tag。

【讨论】：

当我按照您现在的建议进行编辑时，我现在收到错误消息：jQuery.Deferred exception: jQuery(...).select2 is not a function TypeError: jQuery(...).select2 is not a function at htmlDocument.<anonymous> (http://localhost:8000/home:7:35) at j (http://localhost:8000/js/jquery-3.1.1.min.js:2:29948) at k (http://localhost:8000/js/jquery-3.1.1.min.js:2:30262) undefined jquery-3.1.1.min.js:2 Uncaught TypeError: jQuery(...).select2 is not a function

非常感谢您的支持。

正如@Araz 在评论中提到的，您的 Js 文件是否加载正确？

【参考方案3】：

在您的代码primaryLanguage 中您使用id，所以现在更改一个小代码：

<script type="text/javascript">
  jQuery(document).ready(function()
    jQuery("#primaryLanguage").select2();
  );
</script>

【参考方案4】：

只需从主布局中删除此代码

<script src=" asset('js/app.js') " defer></script>

【讨论】：

你为什么建议这样做，因为我有 require(./bootstrap') 和 require('admin-lte') 在里面。为什么删除它会起作用？

【参考方案5】：

就我而言，我使用的是 Laravel mix，我认为错误是通过调用脚本 js/app.js 最后应该先调用它，我做到了，它已经解决了

【讨论】：

解释是什么解决了您的问题可以帮助其他用户了解他们必须做什么 :) 您也可以分享您的代码。

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。