Question

我是jQuery和Bootstrap的新手。一切都很顺利，直到我决定使用Bootstrap Tokenfield添加基于搜索系统。

现在，当我尝试执行my，jsp页面时，我得到：Uncaught TypeError：$（...）。tokenfield不是函数

这是我的.jsp页面

JQuery导入

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<link rel="stylesheet" href="/webjars/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="/webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<title></title>

</head>

组件声明

<input type="text" class="form-control" id="tokenfield" value="red,green,blue" />
$('#tokenfield').tokenfield({
  autocomplete: {
    source: ['red','blue','green','yellow','violet','brown','purple','black','white'],
    delay: 100
  },
  showAutocompleteOnFocus: true
})

我在做什么？我忘记带点什么了？

Answer 1

DOM告诉你它不知道tokenfield函数，因为它没有在你的标题中声明，所以你必须先加载这两个文件才能使用它：

1 - 加载dist/bootstrap-tokenfield.min.js

2 - 在HTML

中加载dist/css/bootstrap-tokenfield.css

让你的代码原样

注意：那2个图书馆需要作为要求：jQuery 1.9 +，Bootstrap 3+（仅限CSS）

图书馆链接在这里：http://www.github.com/sliptree/bootstrap-tokenfield/archive/master.zip

Answer 2

尝试此操作，您必须在index.html

中加入bootstrap-tokenfield.js

<input type="text" class="form-control" id="tokenfield" value="red,green,blue" />

$('#tokenfield').tokenfield({
  autocomplete: {
    source: ['red','blue','green','yellow','violet','brown','purple','black','white'],
    delay: 100
  },
  showAutocompleteOnFocus: true
})

未捕获的TypeError：$（...）。tokenfield不是函数

2 个答案: