0

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

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>

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

4

2 回答 2

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);
});
于 2016-08-30T03:28:17.783 回答
0

这是我找到的解决方案：

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

于 2016-08-30T17:29:13.610 回答