未定义的函数初始化标签输入引导程序 3答案

【问题标题】：undefined function initializing taginput bootstrap 3未定义的函数初始化标签输入引导程序 3
【发布时间】：2013-09-21 18:57:51
【问题描述】：

我正在尝试为 bootstrap 3 实现 TagInput，但是当我尝试初始化它时，它给了我一个错误 Uncaught TypeError: Property 'undefined' of object #<TagsInput> is not a function

这是我调用脚本的方式

<script src='<?php echo base_url() ?>resources/js/jquery-1.7.2.min.js' type='text/javascript'></script>

<script src='<?php echo base_url() ?>resources/js/bootstrap.js' type='text/javascript'></script>

<script src='<?php echo base_url() ?>resources/js/bootstrap-tagsinput.js' type='text/javascript'></script>

<script> $('.tagplayer').tagsinput();</script>

表格

<input type="text" class="tagplayer">

编辑：我目前不再使用此插件，我需要建议接受正确答案。

【问题讨论】：

标签： javascript jquery twitter-bootstrap tags

【解决方案1】：

我在选择正确的插件时也遇到了问题。最后我自己实现了taginput，不难。代码：

HTML：

<p>Tags : </p><input type="text" name="irrelevant" id="tags" placeholder="add tag">

JavaScript(JS)：

var id=1;
function remove(id) {
    var element = document.getElementById(id);
    element.parentNode.removeChild(element);
}

function addTag(e,name) {
    if (!e) e = window.event;
    var keyCode = e.keyCode || e.which;
    var entry=document.getElementById(name);
    entry.value=entry.value.toLowerCase();
    if (keyCode == '8' && entry.value.length==0) {
        if (entry.previousSibling.className=="btn btn-secondary margin") {
            entry.previousSibling.parentNode.removeChild(entry.previousSibling)
        }
        return;
    } 
    if (keyCode != '13' || !/[a-z]$/.test(entry.value) || document.getElementById(name+"_"+entry.value) != null) {
        return;
    }
    var id;
    var btn = document.createElement("button");
    var t = document.createTextNode(entry.value); 
    btn.appendChild(t);
    btn.setAttribute("id",name+"_"+entry.value)
    btn.className="btn btn-secondary margin"
    btn.setAttribute("onclick","remove('"+name+"_"+entry.value+"')")

    var insertedNode = entry.parentNode.insertBefore(btn, entry);
    entry.value=""
}
document.getElementById('tags').onkeypress=function(e) { addTag(e,"tags"); }

基本上，您只是检查是否按下了键以及输入的格式是否正确，并相应地在输入之前添加标记，这些标记只是按钮。只使用纯 JS。

【讨论】：

【解决方案2】：

在 GitHub 上查看此问题：https://github.com/TimSchlechter/bootstrap-tagsinput/issues/52

对我有帮助的解决方法：

<input type="text" id="tags">
<script>
    var tags = $('#tags')
    tags.tagsinput();

    tags.tagsinput('input').typeahead({
      prefetch: 'prefetch.json'
    }).bind('typeahead:selected', $.proxy(function (obj, datum) {
      tags.tagsinput('add', datum.value);
      tags.tagsinput('input').typeahead('setQuery', '');
    }, $('input')));
</script>

【讨论】：

【解决方案3】：

我遇到了同样的问题。可能作者修改后忘记测试了。打开bootstrap-tagsinput.js，在最后一行可以看到如下代码；

   $(function() {
       $("input[data-role=tagsinput], select[multiple][data-role=tagsinput]").tagsinput();
   });

如您所见，在这段 js 代码中，tagsinput() 函数被调用。因此，包括您在代码中对tagsinput() 的调用，对tagsinput() 的调用有2 次。

因此，在第 357 行，将 tagsinput() 函数注册为 jquery 插件，初始化失败。

要解决这个问题，请注释上面的代码。（但也许你可以使用一些功能，但并不重要

无论如何，您也需要包含bootstrap-tagsinput.css。

【讨论】：

如果您要手动初始化标签输入而不是注释掉功能，我建议从输入中删除数据角色。