JQuery Selectize - 未捕获的类型错误：$(...).selectize 不是函数答案

【问题标题】：JQuery Selectize - Uncaught TypeError: $(…).selectize is not a functionJQuery Selectize - 未捕获的类型错误：$(...).selectize 不是函数
【发布时间】：2021-03-21 05:16:54
【问题描述】：

（我检查了针对不同问题找到的其他解决方案，但它们没有帮助我。）

我尝试在我的 UI 中使用 Selectize.js 并不断收到此错误：$(...).selectize is not a function。

我在 VS 中使用带有剃须刀页面的 asp.net 核心进行编码，所以我的 html 是 html 和 C# 的组合。我也在使用典型的 MVVM/MVC 风格的框架。

HTML

<!--JQuery version 3.5.1-->
<script type="text/javascript" src="~/lib/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="~/lib/selectize/dist/js/standalone/selectize.js"></script>
<link rel="stylesheet" href="~/lib/selectize/dist/css/selectize.bootstrap4.css" />

@{
    var groups = ViewData["Groups"] as ArrayList;
}

    <div class="group-select-container" id="group-select-container" hidden>
        <label for="group-select">View data from: </label>

        @{ if (groups.Count > 0)
            {
                <select name="group-select" id="group-select" placeholder="Select a group...">
                    @{
                        foreach (var group in groups)
                        {
                            <option value="@group" id="@group">@group</option>
                        }
                    }
                </select>
            }
        }
    </div>
</div>

$(document).ready(function () {
    $('#group-select').selectize({
        sortField: {
            field: 'text',
            direction: 'asc'
        },
    });
});

因为我使用的是独立的 js 文件，所以我拥有所有微插件。

我将我的函数包裹在另一个函数中 - 我读过我应该这样做。

我无法确定错误的原因。如果有人知道，请告诉我。

谢谢！

【问题讨论】：

使用 RENDERED HTML 制作 minimal reproducible example - 但首先查看网络选项卡，看看是否真的找到了
我刚刚创建了一个新项目，在 wwwroot 的 lib 文件夹下加载了我的脚本，设置了我的 html（虽然是硬编码选项）和 js，但它没有工作。

标签： jquery selectize.js

【解决方案1】：

无论出于何种原因，我在 asp.net 核心中发现默认 layout.cshtml 文件在页面底部包含 JQuery，覆盖了页面顶部引用我的 JS 的脚本标记。删除它并且它工作。

【讨论】：

【解决方案2】：

我可能是错的，但如果

  <select name="group-select" id="group-select" placeholder="Select a group...">

当您尝试使用 jQuery 选择器时没有初始化，可能是因为 groups.Count 不大于 0（我假设这就是 @{ if (groups.Count > 0) 所做的？在调用 $(...).selectize 之前尝试输出元素以检查它是否为空，看看是否有帮助。

【讨论】：

我已经尝试使用硬编码的设置选项，之后没有任何动态。还是什么都没有。