ブートストラップタグAJAXコールで作成した要素で使用すると入力イベントが発生しない

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です適用され、「タグ...」の要素）は、入力フィールドからタグを削除/追加するユーザに対応して削除/追加される：

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

任意のアイデアのように何がここで間違っている可能性があり、それを修正する方法？

Answer 1

このようにしたら、うまくいきます。

入力要素にidを追加します。

見え入力以下のdiv要素「ブートストラップ・tagsinput」内の、隠された入力：

<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

ようにする必要がありますフィールドは、サーバー側で生成され、.tagsinput（）が適用された入力フィールドの属性を持ちます。イベントは、 'bootstrap-tagsinput' div内にある目に見える入力ではなく、このフィールドに関連付ける必要があります。