twitter-bootstrap Bootstrap 标签输入不适用于 jquery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19211973/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap tags input not working with jquery
提问by Ahmed Kato
I am using Bootstrap tags inputto make tags inside text input,in the documentation:
我正在使用Bootstrap 标签输入在文本输入中制作标签，在文档中：
Just add data-role="tagsinput" to your input field to automatically change it to a tags input field.
只需将 data-role="tagsinput" 添加到您的输入字段即可自动将其更改为标签输入字段。
But when using jquery before function:
但是在函数之前使用jquery时：
$('#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.
它的显示方式与任何带有文本且没有标签的文本输入一样。
any help ??
任何帮助？
回答by MackieeE
Bootstrap is run at page load as an self-executing function. By adding a new element to the DOM - By that time, bootstrap-tagsinput.jswouldn't know anything about it. So you'll have to Initialise it after adding it to the DOM document via JavaScript.
Bootstrap 在页面加载时作为自执行函数运行。通过向 DOM 添加一个新元素 - 到那时，bootstrap-tagsinput.js对它一无所知。因此，您必须在通过 JavaScript 将其添加到 DOM 文档后对其进行初始化。
To refresh input tags (Bootstrap Tagsinput Docs):
刷新输入标签（Bootstrap Tagsinput Docs）：
$('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');
});
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 =)
希望有帮助！虽然，上面$('input')会刷新<input>整个文档中的每个标签，所以你可以给前置<input>标签一个 .class 或 #ID 以便更快地访问 =)
Update:
更新：
As koala_devdid correctly mention within the comments, you probably wouldn't need to initialise it via $('selector').tagsinput('refresh')but rather just:
正如koala_dev在评论中正确提到的那样，您可能不需要通过以下方式初始化它，$('selector').tagsinput('refresh')而只需：
$('#selecor').tagsinput();
.tagsinput('refresh')would normally be actioned on an .tagsinput()input that's already initialised with new options given.
.tagsinput('refresh')通常会对.tagsinput()已经使用给定新选项初始化的输入进行操作。
回答by Khademul Basher
I made it working following ways. It was showing problem $(..).tagsinput() was not found and I could now update the tags with new values.
我让它按照以下方式工作。它显示问题 $(..).tagsinput() 没有找到，我现在可以用新值更新标签。
I removed first and last line from file bootstrap-tagsinput.js, that is '(function ($) {'and '})(window.jQuery)'.
我从文件 bootstrap-tagsinput.js 中删除了第一行和最后一行，即'(function ($) {'和'})(window.jQuery)'。
And called the below two lines where tags was required to display and update.
并在需要显示和更新标签的地方调用以下两行。
$("input[data-role=tagsinput]").tagsinput('removeAll');
$("input[data-role=tagsinput]").tagsinput('add', 'New Value');
