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

Question

我正在使用 Bootstrap tags input 在 HTML 中的文本输入中制作标签，但是，我无法使用 Javascript 在使用时单击输入时触发的功能标签插件。

我在 HTML 中有以下输入：

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

注意：

data-role="tagsinput"

这是 bootstrap 标记所必需的（类似于在堆栈溢出中创建标记）。标签js全部来自这里：(Bootstrap 4 input tags):

我正在尝试运行单击同一输入字段时 javascript 以下内容：

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

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

data-role="tagsinput"

来自 HTML 它工作得很好。不过打标签的JS自然不行。

我尝试用内联 onclick() 命令替换 jquery 侦听器，但我得到了相同的结果。

BS4输入标签如何触发JS函数？

谢谢

Answer 1

终于明白了。查看插件源代码，它向名为：

的输入添加了一个 class

bootstrap-tagsinput

根据 user3154108 的评论，该插件可能会替换 HTML。因此以下内容有效：

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

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

Custom Javascript Functions not working when used alongside Bootstrap 4 Input Tagging Plugin

html

javascript

jquery

tagging

bootstrap-4