使用引导标签输入以编程方式生成标签

Generating tags programmatically with Bootstrap Tags Input

本文关键字：标签 编程 方式生 输入      更新时间：2023-09-26

我正在尝试使用标签输入（从这里）：

<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" />

我工作得很好。当我按回车键（键入后）时，标签出现。现在我正在尝试生成（在Javascript中）这些输入：

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

该字段已创建，但无法正常工作：当我按回车键时，不会添加标签（解释为表单验证尝试）。我不知道为什么它在手动添加时可以完美运行，但在生成时不起作用。

感谢您的帮助！

引导标记正在查找具有该数据属性的输入 文档就绪 （或页面加载时的某个时间点）。加载页面后，它不会知道它们。添加 HTML 后，您需要告诉它应用标签，如以下问题所示：如何将引导标签绑定到动态创建的元素？

要以"jQuery"的方式执行此操作：

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