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

Question

我使用Bootstrap标签输入在文本输入中制作标签,在文档中:

只需将data-role ="tagsinput"添加到输入字段,即可自动将其更改为标签输入字段.

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

$('#addrun').click(function () {
            $('#addrun').before('<input type="text" value="Amsterdam,Washington,Sydney,Beijing" data-role="tagsinput" />');    
        });

它显示为任何带有文本输入的文本,没有标签.

任何帮助？

Answer 1

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

刷新输入标签(Bootstrap Tagsinput Docs):

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

所以对你来说,你需要:

/** 
 * On <div id="addrun"> on click,
 * pre-apend it with an new Input
 *
 * Then refresh Bootstrap. 
**/
$('#addrun').click(function(){

     $('#addrun').before(
         '<input type="text" '+
         'value="Amsterdam,Washington,Sydney,Beijing" '+
         'data-role="tagsinput" />'
     ); 

     //Now run bootstrap.js to re-search
     //new data-* elements
     $('input').tagsinput('refresh');   
});

希望有所帮助!虽然,上面$('input')将刷新<input>整个文档中的每个标记,因此您可以改为为前置<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');