Пользовательские Javascript Функции не работают при использовании вместе с Bootstrap 4 Плагином для тегов ввода

Question

Я использую Bootstrap теги ввода , чтобы сделать теги внутри ввода текста в HTML, однако я не могу использовать функции Javascript, которые срабатывают при нажатии на ввод, когда используется Плагин тегов.

У меня есть следующий ввод в HTML:

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

Обратите внимание:

data-role="tagsinput"

Это требуется для тегирования bootstrap (аналогично когда вы создаете теги в стеке переполнения). Пометка js - это все отсюда: (Bootstrap 4 входных тега):

Я пытаюсь запустить следующий javascript в том же поле ввода при нажатии:

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

Предупреждение не срабатывает в JS, когда я нажимаю на вход. Однако, если я удаляю

data-role="tagsinput"

из HTML, он работает просто отлично. Но, естественно, тегирование JS не работает.

Я пытался заменить прослушиватель jquery для встроенных команд onclick (), но я получаю тот же результат.

Как можно Я запускаю функцию JS при использовании тегов ввода BS4?

Спасибо

Answer 1

Наконец-то понял это. Просматривая исходный код плагина, он добавляет класс к входу с именем:

bootstrap-tagsinput

В зависимости от того, что прокомментировал пользователь3154108, плагин может заменить 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!!!
      })

Answer 2

Проверьте этот кодовый блок, он работает просто так, как вы это сделали: Кодовый код

<input id="js_tags" data-role="tagsinput" style="background-color:beige;" placeholder="click">

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

Редактировать: Попробуйте это здесь (он срабатывает только после Вы что-то написали, а затем щелкнули в стороне от ввода), возможно, вы можете использовать это, но в противном случае я понятия не имею

$('#js_tags').on('beforeItemAdd', function(event) {
  alert("test");
});

Конечно, если вы используете это, вы можете удалить событие onclick