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

Question

我创建了一个按钮来添加新字段，我想添加的字段是按钮单击时的 tagit 字段，数据已完美添加，但 tagit 功能不起作用，它添加为空白 ul。我不知道为什么它不将 ul 转换为 tagit 字段。有没有办法动态添加 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 多年......但我认为它可以帮助你