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

我在文档输入中使用 Bootstrap tags input来制作标签：

Just add data-role=”tagsinput” to your input field to automatically
change it to a tags input field.

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

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

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

任何帮助？

解决方法

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,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()输入执行操作.