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 Tags正在寻找文档准备好的数据属性的输入（或页面加载时的某个点）。加载页面后它不会意识到它们。添加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
});

使用Bootstrap Tags Input以编程方式生成标记

1 个答案: