javascript - 使用 Bootstrap Tags 输入以编程方式生成标签

Question

我正在尝试使用 tags input (from here) :

<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput.css" />
<script src="//cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput.min.js"></script>

<input type="text" name="modalites" class="form-control"
           value="" data-role="tagsinput" />

我工作得很好。当我按 Enter 键(输入后)时，会出现该标签。现在我正在尝试生成(在 Javascript 中)这些类型的输入:

var cellModalite = row.insertCell(3);
cellModalite.innerHTML = "<input class='form-control' type='text' name='modalites[]' value='' data-role='tagsinput'>";

该字段已创建，但无法正常工作:当我按 Enter 键时，未添加标签(解释为表单验证尝试)。不知道为什么手动添加的时候可以完美，但是生成的时候就不行了。

感谢您的帮助!

Answer 1

Bootstrap 标签正在文档就绪时(或页面加载时的某个时刻)寻找具有该数据属性的输入。页面加载后它不会意识到它们。添加 HTML 后，您需要告诉它应用标签，如本问题所示:How to bind Bootstrap Tags to dynamically created elements?

以“jQuery”方式执行此操作:

var tagInput = $('<input />', {
    class: 'form-control',
    type: 'text',
    name: 'modalites[]'
});
tagInput.appendTo($('#SomeElement'));
tagInput.tagsinput({
    // config for tags input
});