Блог

Мне нужно обработать динамическую кнопку, которая удалит все теги Tagify. Документация по удалению всех тегов с помощью jQuery находится здесь: https://yaireo.github.io/tagify/#section-jquery

В документации говорится:

 // get the Tagify instance assigned for this jQuery input object so its methods could be accessed
var jqTagify = $input.data('tagify');

// bind the "click" event on the "remove all tags" button
$('.tags-jquery--removeAllBtn').on('click', jqTagify.removeAllTags.bind(jqTagify))
  

Имея это в виду, я безуспешно пытался выполнить следующее (можно увидеть здесь в JSFiddle):

 $(document).on('click', '#btn-test', function()
{
    var $input = $('#input-test').tagify();    
    $input.removeAllTags();
});
  

Я также попытался создать подход, более близкий к тому, что указано в документации:

 $(document).on('click', '#btn-test', function()
{
    var $input = $('#input-test');
    var _tagify = $input.data('tagify');

   _tagify.removeAllTags();
});
  

Но в обеих ситуациях ошибка:

Не удается прочитать свойство ‘removeAllTags’ неопределенного

Я не могу напрямую привязать функцию удаления к элементу DOM, потому что кнопки будут создаваться «на лету».

У меня это работает так

  var prueba = '"Lic","ffff","asdasd","asdd","asd","dsdsd"';
 var $input = $('input[name=tags]');
 var jqTagify = $input.data('tagify');
 jqTagify.addTags(prueba);
 jqTagify.removeAllTags();
  

$input.data('tagify') не будет работать и вернется undefined , потому что вы не инициализировали Tagify с помощью jQuery в соответствии с инструкциями в документах:

 $('#input-test').tagify()
  

Выше показано, как все плагины jQuery используются при применении к DOM-узлу — сначала вы создаете экземпляр объекта jQuery, а затем применяете к нему плагин jQuery. Как только вы сделаете это таким образом, data свойство tagify будет доступно: $input.data('tagify')

Вместо этого вы инициализировали его как ванильную версию, используя new Tagify(...) .

в jquery:

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tagify/3.16.3/tagify.min.css" />
<input name='tags-jquery' id="input-test" >
<button id="btn-test">
  Delete
</button>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tagify/3.16.3/jQuery.tagify.min.js"></script>

<script>
var $el = $('#input-test').tagify()
var jqTagify = $el.data('tagify')
var btn = $('#btn-test')
btn.on('click', jqTagify.removeAllTags.bind(jqTagify))
</script>