动态创建的元素上的 Bootstrap 标签输入

Question

我使用 Bootstrap Tags 输入（带有预先输入），它在我的静态输入上效果很好。 但我也创建了动态输入字段 - 这些是行不通的。

如何将动态创建的元素附加到tagsinput？

主要代码：

var depends = ["jquery"];
var substringMatcher = function(strs) {
    return function findMatches(q, cb) {
        var matches;
        matches = [];
        substrRegex = new RegExp(q, 'i');
        $.each(strs, function(i, str) {
            if (substrRegex.test(str)) {
                matches.push(str);
            }
        });
        cb(matches);
    };
};
var field = $('.resource_depend');
field.tagsinput({
    confirmKeys: [13, 44],
    itemValue: 'id',
    typeaheadjs:({
        hint: true,
        highlight: true,
        minLength: 1
    }, {
        name: 'depends',
        source: substringMatcher(depends)
    }),
    maxTags: 20,
    maxChars: 50
});

后来我有（类似的东西）：

...
var cnt = 0;
var addFragment = myStaticFragment.cloneNode(true);
addFragment.id = 'dynamic_'+ cnt
myStaticFragment.parentNode.appendChild(addFragment);
cnt += 1;

注意：我有几个使用独立标签的独立字段。

使用开发人员工具，似乎添加了一些代码，但不是像静态输入那样的功能。

更新：我尝试从“myStaticFragment”中删除“data-role”属性，并在每次添加时调用主代码。它只是将输入字段加倍，没有任何区别。

Answer 1

我以前没有使用过 typeahead 库，所以这是基于我对类似 javascript UI 库的经验。如果它类似于 KendoUI 或 jQueryUI 库，那么您需要在元素位于 DOM 上之后添加功能。

因此，既然您在 javascipt 中进一步使用了 jQuery，我将利用它。

通过更改此块：

var cnt = 0;
var addFragment = myStaticFragment.cloneNode(true);
addFragment.id = 'dynamic_'+ cnt
myStaticFragment.parentNode.appendChild(addFragment);
cnt += 1;

到（例如）：

var cnt = 0;
var addFragment = $(myStaticFragment.cloneNode(true)).prop('id', 'dynamic_'+ cnt);
var tagFragment = $(myStaticFragment).data().tagsInput(); //retrieve the functionality of the element
myStaticFragment.parentNode.appendChild(addFragment); //add the fragment to the DOM
addFragment.tagsInput(tagFragment); 
cnt += 1;

从理论上讲，至少应该让您沿着正确的轨道走得足够远，以便能够弄清楚这个特定库所需的确切方法。

更新：考虑到旧版本的 jQuery 没有 .data() 函数，一种选择可能是将元素的设置存储在变量中。类似以下内容：

var tagInputSettings = {
    confirmKeys: [13, 44],
    itemValue: 'id',
    typeaheadjs:({
        hint: true,
        highlight: true,
        minLength: 1
    }, {
        name: 'depends',
        source: substringMatcher(depends)
    }),
    maxTags: 20,
    maxChars: 50
};

var field = $('.resource_depend');
field.tagInput(tagInputSettings); 

........................

var cnt = 0;
var addFragment = $(myStaticFragment.cloneNode(true)).prop('id', 'dynamic_'+ cnt);
myStaticFragment.parentNode.appendChild(addFragment); //add the fragment to the DOM
addFragment.tagsInput(tagInputSettings); 
cnt += 1;

可能有用吗？