与通过 AJAX 调用创建的元素一起使用时，引导标记输入事件不会触发答案

【问题标题】：Bootstrap Tags Input events not firing when used with element created via AJAX call与通过 AJAX 调用创建的元素一起使用时，引导标记输入事件不会触发
【发布时间】：2018-05-23 20:51:02
【问题描述】：

我有一个带有表单的页面，它是通过 AJAX 调用创建的，其中包含 Bootstrap Tags Input element。以下代码尝试利用标准标签输入事件，但没有效果：

Javascript：

<script>
    $(document).on('itemAdded itemRemoved', '.bootstrap-tagsinput input',  function(e) {
        alert('triggered');
        // call some function
    });

    // after the form is generated via the AJAX call, the tags input is 'refreshed'
    ...
       $('.input_tags').tagsinput('refresh');
    ...
</script>

HTML（这是应用标签输入插件时生成的标准 HTML；'tag...' 元素的添加/删除对应于用户从输入中添加/删除标签字段）：

<div class="bootstrap-tagsinput">
   <span class="tag label label-info">
   ...
   <span class="tag label label-info">
   <input type="text" size="4">
</div>

关于这里可能出现什么问题以及如何解决它的任何想法？

【问题讨论】：

应该触发什么动作？？你能告诉我们你的html吗？
@kernallora - 我添加了页面完全加载时出现的 HTML（这与服务器生成的 HTML 不同，因为标签插件会更改 HTML 代码）。它应该在删除或添加标签时触发：itemAdded、itemRemoved。
如果您找到了解决方案，请发布您的问题的答案，这样会更容易理解。
@NicolasHenneaux - 完成。

标签： jquery ajax twitter-bootstrap bootstrap-tags-input

【解决方案1】：

这样一试，应该就可以了。

为输入元素添加 id。

 <div class="bootstrap-tagsinput">
   <span class="tag label label-info">
   ...
   <span class="tag label label-info">
   <input type="text" id="idInput" size="4">
</div>

你的活动应该是这样的

 $("#idInput").on('itemAdded', function(event) {
    console.log('item added : '+event.item);
});
$("#idInput").on('itemRemoved', function(event) {
    console.log('item removed : '+event.item);
});

【讨论】：

谢谢，核心。我已经解决了这个问题。我会在几分钟后将我的解决方案附加到我的答案中。

【解决方案2】：

这是我找到的解决方案：

在 'bootstrap-tagsinput' div 元素中的可见输入下方，存在一个隐藏的输入字段，该字段具有服务器端生成的输入字段的属性，并且应用了 .tagsinput()。事件应与此字段相关联，而不是与“bootstrap-tagsinput”div 中的可见输入相关联。

【讨论】：