Bootstrap标签输入不适用于jQuery [英] Bootstrap tags input not working with jquery

问题描述

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

I am using Bootstrap tags input to make tags inside text input,in the documentation:

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

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

但是在功能之前使用 jquery 时:

But when using jquery before function:

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

它的显示就像任何带有内部文本且没有标签的文本输入.

it is displayed like any text input with text inside and no tags.

任何帮助??

推荐答案

Bootstrap在页面加载时作为自执行功能运行.通过向DOM中添加新元素-到那时，bootstrap-tagsinput.js对此一无所知.因此，在通过JavaScript将其添加到DOM文档之后，您必须对其进行初始化.

Bootstrap is run at page load as an self-executing function. By adding a new element to the DOM - By that time, bootstrap-tagsinput.js wouldn't know anything about it. So you'll have to Initialise it after adding it to the DOM document via JavaScript.

刷新输入标签( Bootstrap标签输入文档):

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

因此，对于您来说，您需要:

So for you, you'd need to:

/** 
 * 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以便更快地访问=)

Hope that helps! Although, the above $('input') will refresh every <input> tag in the whole document, so you could instead give the prepended <input> tag an .class or an #ID for quicker access =)

koala_dev 在注释中正确提及，您可能不需要通过$('selector').tagsinput('refresh')对其进行初始化，而只需进行初始化:

As koala_dev did correctly mention within the comments, you probably wouldn't need to initialise it via $('selector').tagsinput('refresh') but rather just:

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

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

.tagsinput('refresh') would normally be actioned on an .tagsinput() input that's already initialised with new options given.

这篇关于Bootstrap标签输入不适用于jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！