未捕获的TypeError:$(...)。tokenfield不是函数

时间:2016-06-25 18:55:04

标签: javascript jquery twitter-bootstrap jsp

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

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
})

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

2 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:0)

尝试此操作,您必须在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
})