将 JQuery 脚本与多个其他脚本一起放置？答案

【问题标题】：Placement of JQuery Scripts with multiple other scripts?将 JQuery 脚本与多个其他脚本一起放置？
【发布时间】：2017-10-19 08:27:23
【问题描述】：

我写了这个脚本

 $.ajax({
     type: "POST",
     url: "/my/GetTagsByID",
     data: {
         Link_ID: LId
     },
     datatype: "json",
     success: function(result) {
         $('#tokenfield-typeahead').val('Success 1, Success 2')
     },
     error: function(jqXHR) {
         alert(jqXHR.status);
     }
 })

问题是，但我不知道SCRIPTS 的确切位置应该是什么

当我以这种方式向上时：

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/dist/typeahead.bundle.js"></script>
<link href="~/Scripts/dist/css/tokenfield-typeahead.css" rel="stylesheet" />
<script src="~/Scripts/dist/bootstrap-tokenfield.js"></script>
<link href="~/Scripts/dist/css/bootstrap-tokenfield.css" rel="stylesheet" />

结果如下

这意味着，我可以使用 TokenField 和 TypeAhead，但它不会替换值 $('#tokenfield-typeahead').val('Success 1, Success 2')，这意味着我无法访问 jQuery？

但是当我将Jquery 脚本的位置切换到这个位置时（将 JQUERY 移到底部）：

<script src="~/Scripts/dist/typeahead.bundle.js"></script>
<link href="~/Scripts/dist/css/tokenfield-typeahead.css" rel="stylesheet" />
<script src="~/Scripts/dist/bootstrap-tokenfield.js"></script>
<link href="~/Scripts/dist/css/bootstrap-tokenfield.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>

我得到以下结果

我不能使用Tokenfield，我不能再使用TypeAhead了。

我该怎么办？

添加了新代码 我添加了新代码，似乎 JQuery 无法将 tokenfiled 识别为函数 - 我如何在添加了所有必需引用的地方解决这个问题 - 请参阅下面的代码（我在控制台中遇到相同的错误，无论我在哪里test) - 请运行代码并点击按钮

$('#bt').click(function() {

  $('#tokenfield-typeahead').tokenfield('setTokens', ['blue', 'red', 'white']);

});

<link href="http://sliptree.github.io/bootstrap-tokenfield/dist/css/bootstrap-tokenfield.css" rel="stylesheet" />
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://sliptree.github.io/bootstrap-tokenfield/dist/bootstrap-tokenfield.js"></script>



<input type="text" class="form-control" id="tokenfield-typeahead" value="Temp 1, Temp 2" data-limit="10" placeholder="Enter tags" />

<button id="bt">Click me</button>

【问题讨论】：

标签： jquery html asp.net-mvc typeahead bootstrap-tokenfield

【解决方案1】：

...这意味着我无法访问 jQuery？

不，根本不是这个意思。这只是意味着val 没有按照您的预期进行。

这并不让我感到惊讶。 极可能您正在使用的 tokenfield 插件需要您使用特定于 tokenfield 的方法来设置值，而不是 val。看了the documentation，好像是tokenfield('setTokens', ...)：

$('#tokenfield-typeahead').tokenfield('setTokens', 'Success 1,Success2');

我该怎么办？

将 jQuery 放在任何插件之前，因为插件需要 jQuery 才能连接自己；当事情没有按预期工作时，始终将文档作为您的第一个操作；并使用正确的方法在令牌字段中设置“值”。

【讨论】：

我再次深入研究并尝试这样做$('#tokenfield-typeahead').tokenfield('setTokens', ['blue', 'red', 'white']);但仍然没有运气
@aliusman：请用 runnable minimal reproducible example 更新您的问题，使用 Stack Snippets（[<>] 工具栏按钮）演示问题，确保链接所有库来自提供的列表或 CDN（如 cdnjs.com）。
我收到以下错误:( "message": "Uncaught SyntaxError: missing ) after argument list",
@aliusman：那是因为你的参数列表后面缺少)。说真的，这是一个基本的语法错误，你应该可以自己解决。
对不起，是的，但我收到一个错误，上面写着$(...).tokenfield is not a function

【解决方案2】：

找到解决方案 - 感谢 T.J 建议在控制台中运行脚本

问题是，需要加载 Bootstrap.min.js before Tokenfiled (JS) - 这样做解决了问题，现在 JQuery 可以将 Tokenfield 识别为函数并按预期工作。我仍然不明白为什么 Bootstrap 没有加载，因为我的 _Layout 页面和 Bundle 中有它。在任何情况下，我都会看到如何重新安排我的脚本包 -

谢谢

【讨论】：