如何将引导标签绑定到动态创建的元素？答案

【问题标题】：How to bind Bootstrap Tags to dynamically created elements?如何将引导标签绑定到动态创建的元素？
【发布时间】：2022-02-03 18:41:32
【问题描述】：

我在将引导标记绑定到输入字段时遇到问题，我认为这是因为输入字段是使用 ajax 动态创建的。根本没有任何反应。

echo " <div class='tags-cont'>
    <input value='".$tags."' class='tags' type='text' name='tags' data-role='tagsinput' placeholder='Add tags' />
</div>";

脚本嵌入在正文结束标记之前：

<script src='scripts/plugins/bootstrap_tags/bootstrap-tagsinput.js' type='text/javascript'></script>
<link href='scripts/plugins/bootstrap_tags/bootstrap-tagsinput.css' rel='stylesheet' type='text/css' />

【问题讨论】：

它是否适用于非动态创建的？做一个测试。
是的，您可以使用 data-role="tagsinput" 或 $('input').tagsinput()

标签： jquery twitter-bootstrap bootstrap-tags-input

【解决方案1】：

我明白了。对于将来会偶然发现此问题的任何人：

删除：

data-role="tagsinput"

并在 ajaxComplete 上实例化 tagsinput：

$(document).ajaxComplete(function(){
        $('.tags').tagsinput({
            maxTags: 3
        });
    });

【讨论】：

【解决方案2】：

我想我回答这个问题有点晚了，但我遇到了同样的问题，我刚刚添加了以下内容：

第 1 步：从我的输入字段中删除 data-role="tagsinput"。

第 2 步：在创建动态元素的位置之后添加以下代码。

var tags = $('#tags'); 
tags.tagsinput({}); 
tags.tagsinput('removeAll');
tags.tagsinput('add', 'tag1,tag2,tag3');

【讨论】：