Question

我正在使用Bootstrap tags input在文档输入中创建标记：

只需将data-role =“tagsinput”添加到输入字段即可自动生成将其更改为标签输入字段。

但在功能之前使用 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()输入执行操作。

Answer 2

我按照方式开展工作。它显示问题$（..）。找不到tagsinput（），我现在可以用新值更新标签。

我从文件bootstrap-tagsinput.js中移除了第一行和最后一行，即DESCRIBE ORDERS;和'(function ($) {'。

并调用以下两行，其中标签需要显示和更新。

'})(window.jQuery)'

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

2 个答案:

更新