$(...).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>

在 script.js 中（连接到多个 HTML 文件，但上面包含有问题的文件）：

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

在尝试调用addTagToInput() 后，我得到$(…).tagsinput is not a function，即使正确加载了CDN JS 文件。

Answer 1

决定性的问题仍然是你究竟如何初始化你的tagsinput()？

另外，我认为您会遇到一些其他错误，例如网络问题或其他问题，因此无法加载 tagsinput 或 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>