Tag-It jquery 插件上出现多个“createTag”错误答案

【问题标题】：Multiple 'createTag' error on Tag-It jquery pluginTag-It jquery 插件上出现多个“createTag”错误
【发布时间】：2015-09-29 10:02:11
【问题描述】：

我正在使用来自 https://github.com/aehlke/tag-it 的 tag-it jquery 插件

var ip_elem = $('#my-tags');

ip_elem.tagit({
    removeConfirmation: false,
    caseSensitive: false,
    allowDuplicates: false,
    allowSpaces: true,
    readOnly: false,
    tagLimit: null,
    singleField: false,
    singleFieldDelimiter: ',',
    singleFieldNode: null,
    tabIndex: null,
    placeholderText:"Enter Tags"
});

现在，我想使用createTag 方法以编程方式添加更多标签。

var newTags = ["javascript","php","ruby","python"];

for(var k=0;k<newTags.length;k++){
    ip_elem.tagit("createTag", newTags[k]);
}

它在输入中显示第一个标签，但对于第二个标签来说：Uncaught Error: cannot call methods on tagit prior to initialization; attempted to call method 'createTag'。它现在停止并且不再在输入框中添加任何标签。所以，最后只形成了第一个标签（在这种情况下是javascript）

这里出了什么问题？

【问题讨论】：

因为每次您都在循环中将tagit 初始化为ip_elem..
@GuruprasadRao ：这就是他们在文档中显示的方式。你能看看吗？：github.com/aehlke/tag-it#createtagtaglabel-additionalclass
您会看到它们只显示单个标签，而不是多个标签。
@GuruprasadRao：是的。我看到。那么，您如何建议我添加数组中的所有标签？
@GuruprasadRao：我认为tagit 会自动检测它之前是否已初始化。

标签： javascript jquery jquery-plugins tag-it

【解决方案1】：

看看我在 Fiddle 中创建的这个例子：

在 Fiddle 示例中，它将动态创建 tags onload，如果您尝试输入具有相同名称的 tag，它将不允许您添加它。

希望这会对您有所帮助，它有一些事件可以向您展示页面上实际发生的事情。

var newTags = ["javascript","php","ruby","python"];

var addEvent = function(text) {
    $('#events_container').append(text + '<br>');
};

$(function(){
    var ip_elem = $('#myTags');

    ip_elem.tagit({
        removeConfirmation: false,
        caseSensitive: false,
        allowDuplicates: false,
        allowSpaces: true,
        readOnly: false,
        tagLimit: null,
        singleField: false,
        singleFieldDelimiter: ',',
        singleFieldNode: null,
        tabIndex: null,
        placeholderText:"Enter Tags"
    });

    ip_elem.tagit({
        availableTags: newTags,
        beforeTagAdded: function(evt, ui) {
            if (!ui.duringInitialization) {
                addEvent('Before Tag Added: ' + ip_elem.tagit('tagLabel', ui.tag));
            }
        },
        afterTagAdded: function(evt, ui) {
            if (!ui.duringInitialization) {
                addEvent('After Tag Added: ' + ip_elem.tagit('tagLabel', ui.tag));
            }
        },
        beforeTagRemoved: function(evt, ui) {
            addEvent('Before Tag Removed: ' + ip_elem.tagit('tagLabel', ui.tag));
        },
        afterTagRemoved: function(evt, ui) {
            addEvent('After Tag Removed: ' + ip_elem.tagit('tagLabel', ui.tag));
        },
        onTagClicked: function(evt, ui) {
            addEvent('On Tag Clicked: ' + ip_elem.tagit('tagLabel', ui.tag));
        },
        onTagExists: function(evt, ui) {
            addEvent('On Tag Exists: ' + ip_elem.tagit('tagLabel', ui.existingTag));
        }
    });   

    for(var k=0;k<newTags.length;k++)
    {
        ip_elem.tagit("createTag", newTags[k]);
    }
});

JSFIDDLE EXAMPLE

【讨论】：