Я пытаюсь добавить несколько полей tagit динамически, но это не работает для меня - PullRequest
Новая
       35

Я пытаюсь добавить несколько полей tagit динамически, но это не работает для меня

1 голос
/ 29 марта 2019

Я создал кнопку для добавления новых полей, и поле, которое я хочу добавить, представляет собой поле 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>

1 Ответ

1 голос
/ 29 марта 2019

Проблема в том, что тег был создан, добавлен, и вы не запускаете $().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 в течение многих лет ... но я думаю, что он может вам помочь

...