JQuery Selectize - Uncaught TypeError: $(…).selectize is not a function

Question

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

我试图在我的 UI 中使用 Selectize.js 并不断收到此错误：$(…).selectize 不是函数.

我在 VS 中使用 asp.net 核心和 razor 页面进行编码，所以我的 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>

JS

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

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

我的函数包含在另一个函数中 - 我读到我应该这样做。

我找不到错误的原因。如果有人知道请告诉我。

谢谢！

Answer 1

我可能是错的，但是如果

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

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

Answer 2

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