9

ドキュメントで、テキスト入力内にタグを作成するためにBootstrap タグ入力を使用しています。

入力フィールドに data-role="tagsinput" を追加するだけで、自動的にタグ入力フィールドに変更されます。

ただし、関数の前に jqueryを使用する場合:

$('#addrun').click(function () {
            $('#addrun').before('<input type="text" value="Amsterdam,Washington,Sydney,Beijing" data-role="tagsinput" />');    
        });

これは、内部にテキストがあり、タグがないテキスト入力と同じように表示されます。

何か助けて??

4

2 に答える 2

13

ブートストラップは、自己実行機能としてページの読み込み時に実行されます。DOM に新しい要素を追加することによって - その時までに、bootstrap-tagsinput.jsそれについて何も知らないでしょう。そのため、JavaScript を介して DOM ドキュメントに追加した後、初期化する必要があります。

入力タグを更新するには ( Bootstrap Tagsinput Docs ):

$('input').tagsinput('refresh');

したがって、次のことを行う必要があります。

/** 
 * On <div id="addrun"> on click,
 * pre-apend it with an new Input
 *
 * Then refresh Bootstrap. 
**/
$('#addrun').click(function(){

     $('#addrun').before(
         '<input type="text" '+
         'value="Amsterdam,Washington,Sydney,Beijing" '+
         'data-role="tagsinput" />'
     ); 

     //Now run bootstrap.js to re-search
     //new data-* elements
     $('input').tagsinput('refresh');   
});

それが役立つことを願っています! ただし、上記はドキュメント全体の$('input')すべてのタグを更新するため、代わりに先頭に追加されたタグに .class または #ID を付けて、より迅速にアクセスすることもできます =)<input><input>

アップデート：

koala_devがコメント内で正しく言及したため、おそらく初期化する必要はなく、次の方法で初期化する必要があります$('selector').tagsinput('refresh')。

     $('#selecor').tagsinput();

.tagsinput('refresh')通常、指定された.tagsinput()新しいオプションですでに初期化されている入力に対してアクションが実行されます。

于 2013-10-06T18:08:00.367 に答える