javascript - Tag-It jquery 插件上出现多个 'createTag' 错误

Question

我正在使用 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]);
}

它显示输入中的第一个标签，但对于第二个标签显示:未捕获错误:无法在初始化之前调用 tagit 上的方法；尝试调用方法“createTag”。它停止并且现在不再在输入框中添加任何标签。因此，最终仅形成第一个标签(在本例中为 javascript)

这里出了什么问题？

Answer 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