Bootstrap标签输入不能与jquery一起使用

我使用Bootstrap标签输入在文本输入中制作标签，在文档中：

只需将data-role =“tagsinput”添加到输入字段，即可自动将其更改为标签输入字段。

但是在函数之前使用jquery时：

$('#addrun').click(function () { $('#addrun').before(''); }); 

它显示为任何文本输入内部文本，没有标签。

任何帮助？

Answer 1

Bootstrap在页面加载时作为自执行function运行。 通过向DOM添加一个新元素 – 到那时， bootstrap-tagsinput.js不会bootstrap-tagsinput.js有所了解。 因此，在通过JavaScript将其添加到DOM文档之后，您必须对其进行初始化。

刷新输入标签（ Bootstrap Tagsinput Docs ）：

 $('input').tagsinput('refresh'); 

所以对你来说，你需要：

 /** * On 
 on click, * pre-apend it with an new Input * * Then refresh Bootstrap. **/ $('#addrun').click(function(){ $('#addrun').before( '' ); //Now run bootstrap.js to re-search //new data-* elements $('input').tagsinput('refresh'); }); 

希望有所帮助！ 虽然，上面的$('input')将刷新整个文档中的每个标记，因此您可以改为为前面的标记提供.class或#ID以便更快地访问=）

更新：

正如koala_dev在评论中正确提到的那样，你可能不需要通过$('selector').tagsinput('refresh')初始化它，而只是：

  $('#selecor').tagsinput(); 

.tagsinput('refresh')通常会对已经使用给定的新选项初始化的.tagsinput()输入执行操作。

Answer 2

我让它按照方式工作。 它显示问题$（..）。找不到tagsinput（），我现在可以用新值更新标签。

我从文件bootstrap-tagsinput.js中删除了第一行和最后一行，即'(function ($) {'和'})(window.jQuery)' 。

并调用以下两行，其中标签需要显示和更新。

 $("input[data-role=tagsinput]").tagsinput('removeAll'); $("input[data-role=tagsinput]").tagsinput('add', 'New Value');