与Bootstrap 4输入标记插件一起使用时，自定义Javascript函数不起作用

我使用HTML在文本输入中创建标记，但是，我无法使用在使用标记插件时单击输入时触发的Javascript函数

我在HTML中有以下输入：

<input id="js_tags" data-role="tagsinput">

这是引导标记所必需的（类似于在堆栈溢出中创建标记时）。标记js都来自这里：（引导4个输入标记）：

我尝试在单击同一输入字段时在该字段上运行以下javascript：

$(document).ready(function(){
  $("#js_tags").click(function(e){
    alert("test");
  });
});

当我点击输入时，JS中不会触发警报。但是，如果我删除

data-role="tagsinput"

从HTML来看，它工作得很好。但很自然，标记JS不起作用

我曾尝试将jquery侦听器替换为内联onclick（）命令，但得到了相同的结果

使用BS4输入标记时如何触发JS函数

---

谢谢

查看此代码笔，它的工作方式与您的工作方式一样：

当然，如果使用它，可以删除onclick事件

最终解决了这个问题。 通过查看插件源代码，它在输入中添加了一个类，名为：

bootstrap-tagsinput

根据user3154108的评论，该插件可能正在取代HTML。因此，以下措施有效：

  $(".bootstrap-tagsinput").keyup(function(e){
    alert("string");
  })

从输入中获取值有点麻烦，因为输入似乎没有可读的值。在options函数下向pluggin添加以下内容对我来说很有效

      self.$container.on('keyup', 'input', $.proxy(function(event) {
          var $input = $(event.target);
          var text = $input.val();
          //do whatever you want with the text here!!!
      })

---

我对这个库不太熟悉，但这种插件通常会隐藏输入并呈现一些替代html来屏蔽输入。库函数用于更改原始输入值，但是，使用javascript更改输入值不会触发单击事件。您可以尝试库是否对您的输入触发更改事件。谢谢，这很有帮助。查看插件代码，它添加了一个名为bootstrap tagsinput的类，我可以监听它。我会补充答案。谢谢你检查这个。它在代码笔中工作的原因是它没有使用标记输入插件。在输入字段中键入时，不会显示任何标记。它的JS丢失了。我不使用codepen，所以不确定如何添加插件，但我认为如果添加插件，它会断开。

bootstrap-tagsinput

  $(".bootstrap-tagsinput").keyup(function(e){
    alert("string");
  })

      self.$container.on('keyup', 'input', $.proxy(function(event) {
          var $input = $(event.target);
          var text = $input.val();
          //do whatever you want with the text here!!!
      })