我正在尝试动态添加多个 tagit 字段，但它对我不起作用

Question

我创建了一个按钮来添加新字段，我想添加的字段是按钮上的 tagit 字段，单击数据完美地记录了数据，但 tagit 功能不起作用，它添加为空白 ul。我不知道为什么它不将 ul 转换为 tagit 字段。有没有办法动态添加标签字段？

我在 Google 上搜索了很多，但什么也没找到。

var i = 1;
$('.tagWritting').each(function() {
  $(this).tagit({
    options: {
      fieldName: 'test_name' + i,
    }
  });
  i++;
});
$('.addField').on('click', function() {
  $('.tags').append('<ul class="tagWritting"></ul>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/aehlke/tag-it/master/js/tag-it.js"></script>
<link href="http://aehlke.github.io/tag-it/css/jquery.tagit.css"rel="stylesheet" />
<a class="addField">Add New Field</a>
<div class="tags">
  <ul class="tagWritting"></ul>
  <ul class="tagWritting"></ul>
  <ul class="tagWritting"></ul>
</div>

Answer 1

问题是标签已创建、附加，但您没有运行将$().tagit()绑定到这个新元素

这部分：

$('.tagWritting').each(function() {...});

需要运行在每个标签追加

之后

或，包含标签后，您可以选择最后一个标签并执行：

$(tagElement).tagit({...});

类似于：

var i = 0;
function addTagit(element){
  $(element).tagit({
    options: {
      fieldName: 'test_name' + i,
    }
  });
  i++;
}

$('.tagWritting').each(function(){
  addTagit(this);
});

$('.addField').on('click', function() {
  var tag = $('<ul class="tagWritting"></ul>');
  $('.tags').append(tag);
  addTagit(tag);
});

我没有测试代码，我也没有使用 jQuery 多年...但我认为它可以帮助你

我正在尝试动态添加多个 tagit 字段，但它对我不起作用

I am trying to add multiple tagit fields dynamically but it is not working for me

html

javascript

jquery

jquery-ui

tag-it