#javascript #jquery #tagify
#javascript #jquery #tagify
Вопрос:
Мне нужно обработать динамическую кнопку, которая удалит все теги 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, потому что кнопки будут создаваться «на лету».
Комментарии:
1. попробуйте jsfiddle.net/zah2oLkr
2. @CuongLeNgoc Я не могу использовать переменную
tagify
, потому что в моем коде плагин загружается в другой файл. Мне нужно удалить значения без доступа к переменнойtagify
.
Ответ №1:
У меня это работает так
var prueba = '"Lic","ffff","asdasd","asdd","asd","dsdsd"';
var $input = $('input[name=tags]');
var jqTagify = $input.data('tagify');
jqTagify.addTags(prueba);
jqTagify.removeAllTags();
Ответ №2:
$input.data('tagify')
не будет работать и вернется undefined
, потому что вы не инициализировали Tagify с помощью jQuery в соответствии с инструкциями в документах:
$('#input-test').tagify()
Выше показано, как все плагины jQuery используются при применении к DOM-узлу — сначала вы создаете экземпляр объекта jQuery, а затем применяете к нему плагин jQuery. Как только вы сделаете это таким образом, data
свойство tagify
будет доступно: $input.data('tagify')
Вместо этого вы инициализировали его как ванильную версию, используя new Tagify(...)
.
Ответ №3:
в 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>