9

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

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

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

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

它像任何文本输入一样显示，里面有文本，没有标签。

有什么帮助吗？？

4

2 回答 2

13

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

于 2013-10-06T18:08:00.367 回答
7

我让它按照以下方式工作。它显示问题 $(..).tagsinput() 没有找到，我现在可以用新值更新标签。

我从文件 bootstrap-tagsinput.js 中删除了第一行和最后一行，即'(function ($) {'and '})(window.jQuery)'。

并在需要显示和更新标签的地方调用以下两行。

$("input[data-role=tagsinput]").tagsinput('removeAll');
$("input[data-role=tagsinput]").tagsinput('add', 'New Value');
于 2017-04-06T10:22:16.697 回答