Question

我有一个带有表单的页面，该表单是通过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>

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

Answer 1

一旦尝试这样，就可以了。

为input元素添加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);
});

Answer 2

这是我找到的解决方案：

＆＃39; bootstrap-tagsinput＆＃39;中的可见输入下方div元素，存在一个隐藏的输入字段，它具有在服务器端生成的输入字段的属性，并且应用了.tagsinput（）。事件应该与此字段相关联，而不是与“引导程序 - 标签输入”中的可见输入相关联。格。

Bootstrap标签当与通过AJAX调用创建的元素一起使用时，输入事件不会触发

2 个答案: