JQuery 脚本与多个其他脚本的位置？

Question

我写了这个脚本

 $.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 识别为一个函数 - 我如何在我添加了所有必需的引用的地方解决这个问题 - 请参阅下面的代码（我在控制台和无论我在哪里测试）- 请运行代码并单击按钮

$('#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>

Answer 1

...which means I cannot access jQuery?

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

这并不让我吃惊。 极有可能 您正在使用的令牌字段插件需要您使用特定于令牌字段的方法来设置值，而不是 val。看了一眼the documentation，好像是tokenfield('setTokens', ...):

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

What am I supposed to do?

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

Answer 2

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

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

谢谢

JQuery 脚本与多个其他脚本的位置？

Placement of JQuery Scripts with multiple other scripts?

jquery

html

asp.net-mvc

typeahead

bootstrap-tokenfield