jquery - Bootstrap 标签输入不适用于 jquery

Question

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

它的显示方式与任何文本输入一样，内部有文本且没有标签。

有什么帮助吗？

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() 上执行操作已使用给定的新选项初始化的输入。