$ (…) .Tagsinput не является функцией

Question

РЕДАКТИРОВАТЬ : я могу позвонить tagsinput(), только если я не использую tagsinput() в обратном вызове

Это все еще проблема, потому что мне нужно позвонить tagsinput() в обратный вызов.

ОРИГИНАЛ :

Мне еще не удалось найти ответ, который решает мою проблему:

Я пытаюсь использовать это библиотека: https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

мой HTML файл включает:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script>
<!-- Bootstrap CDN links -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="script.js"></script>

<select id="el" data-role="tagsinput" name="el" multiple ></select>

в скрипте. js (который связан с несколькими HTML файлы, но тот, о котором идет речь, включен выше):

function addTagToInput() {
  $('#el').tagsinput('add', 'item2');
}

После попытки вызвать addTagToInput() я получаю $(…).tagsinput is not a function, хотя файл CDN JS был правильно загружен.

Answer 1

Решающий вопрос по-прежнему заключается в том, как именно вы инициализируете свой tagsinput()?

Также я думаю, что вы получаете некоторые другие ошибки, такие как проблемы с сетью или что-то еще, так что taginput или jQuery библиотека будут не загружается. Следующий код работает правильно, и я создал кнопку, событие click которой запускает функцию addTagToInput():

$(function() {

  var $el = $('#el'),
    $btnAddTag = $('#add-tag');

  function initInput() {
    $el.tagsinput({
      // add a custom class which run with bootstrap v4
      tagClass: 'badge-dark'
    });
  }

  function addTagToInput() {
    $('#el').tagsinput('add', 'item' + Math.floor(Math.random() * 100));
  }

  initInput();
  addTagToInput();
  $btnAddTag.on('click', addTagToInput);

});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script>

<button type="button" class="btn btn-dark" id="add-tag">+</button>
<!-- because of adding the initInput() function in jQuery I've deleted the data-role="tagsinput"-->
<select id="el" name="el" multiple ></select>