tagsinput 不是函数，使用 bootstrap 3 和 tags-input 插件答案

【问题标题】：Tagsinput is not a function, using bootstrap 3 and tags-input plugintagsinput 不是函数，使用 bootstrap 3 和 tags-input 插件
【发布时间】：2013-11-21 15:30:26
【问题描述】：

我正在使用带有 jquery 1.10 的 bootstrap 3，并且我正在尝试使用标签输入插件 (http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap3/)，但它不起作用。这是我的错误：

TypeError: tagsinput[arg1] is not a function
var retVal = tagsinput[arg1](arg2);

这是我的html代码：

    <head>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAv92iA1TcfCnk4-bDg7BAJoKOCnh1g7oQ&sensor=false"></script>

<link href="/qtip2/css/jquery.qtip.min.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/css/1309_ciceroos_b2b.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/css/1310_longdistance.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/bootstrap3.0.0/assets/css/bootstrap-tagsinput.css" media="screen" rel="stylesheet" type="text/css" ><script type="text/javascript" src="/bootstrap3.0.0/assets/js/jquery.js"></script>
<script type="text/javascript" src="/js/infobox.js"></script>
<script type="text/javascript" src="/qtip2/js/jquery.qtip.min.js"></script>
<script type="text/javascript" src="/qtip2/js/imagesloaded.min.js"></script>
<script type="text/javascript" src="/bootstrap3.0.0/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/bootstrap3.0.0/assets/js/holder.js"></script>
<script type="text/javascript" src="/bootstrap3.0.0/assets/js/bootstrap-tagsinput.js"></script>
<script type="text/javascript">
                    jQuery(document).ready(function ($) {
                        //$('.bootstrap-tagsinput input').attr("value", "interessi");   
                        $('#idInputWhat').tagsinput('add', 'mare');
                        $('#idInputWhat').tagsinput('add', 'vino'); 

                        $('#idInputWhat').tagsinput({
                            maxTags: 3
                            });                         
                    });
                </script>
        </head>
        <body>
            <form class="form-inline" role="form" id="idFormSearch" method="GET" action="javascript:void(0);">
                                 <div class="form-group col-md-offset-1 col-md-5 _interestInput">
                                    <input type="text" placeholder="Quali sono le tue passioni?" data-role="tagsinput" class="form-control input-lg" name="what" id='idInputWhat' value=""/> 
                                </div>
                                <div class="form-group col-md-3 _interestInput">
                                    <input type="text" placeholder="dove"  class="form-control input-lg" name="where" id='idInputWhere' />
                                    <input type="hidden" name="start" id='idStart' value="0"/> 
                                </div>
                                 <div class="col-md-3 _searchButton">
                                    <input class="btn btn-primary btn-lg" type="submit" value="Ispirami!"></input>
                                  </div>
                              </form>
        </body>

请问有什么建议吗？

【问题讨论】：

您能指定您要使用的标签输入插件吗？
是的，对不起，它是：timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap3
如何包含 jQuery 和插件 JS 文件？ HEAD 还有比所显示的更多内容吗？该插件工作正常：bootply.com/92587
我正在编辑问题，我已经在头部添加了所有代码。

标签： jquery twitter-bootstrap twitter-bootstrap-3 jquery-tags-input

【解决方案1】：

看起来如果您同时指定data-role="tagsinput" 并使用$('#idInputWhat').tagsinput('add', 'vino');，则会出现该错误。尝试删除data-role 属性，并仅使用显式.tagsinput()。

我认为这是 tagsinput 插件中的错误。

似乎在这里得到确认； https://github.com/TimSchlechter/bootstrap-tagsinput/issues/42

【讨论】：

我遇到了类似的问题，但是通过添加行 '$('#idInputWhat').tagsinput('add', 'vino'); '，即使写了 'data-role=tagsinput' 我也可以添加标签

【解决方案2】：

检查是否包含 bootstrap-tagsinput.js 脚本。

这似乎对我有用：JSBin link

【讨论】：

是的，我包含了这个库，但是如果你在你的代码中插入这个： $('#idInputWhat').tagsinput({ maxTags: 3 });它不起作用