Bootstrap tags input not working with jquery -
i using bootstrap tags input make tags inside text input,in documentation:
just add data-role="tagsinput" input field automatically change tags input field.
but when using jquery before function:
$('#addrun').click(function () { $('#addrun').before('<input type="text" value="amsterdam,washington,sydney,beijing" data-role="tagsinput" />'); }); it displayed text input text inside , no tags.
any ??
bootstrap run @ page load self-executing function. adding new element dom - time, bootstrap-tagsinput.js wouldn't know it. you'll have initialise after adding dom document via javascript.
to refresh input tags (bootstrap tagsinput docs):
$('input').tagsinput('refresh'); so you, you'd need to:
/** * on <div id="addrun"> on click, * pre-apend new input * * refresh bootstrap. **/ $('#addrun').click(function () { $('#addrun').before('<input type="text" ' + 'value="amsterdam,washington,sydney,beijing" '+ 'data-role="tagsinput" />'); //now run bootstrap.js re-search //new data-* elements $('input').tagsinput('refresh'); }); hope helps! although, above $('input') refresh every <input> tag in whole document, instead give prepended <input> tag .class or #id quicker access =)
update:
as koala_dev did correctly mention within comments, wouldn't need initialise via $('selector').tagsinput('refresh') rather just:
$('#selecor').tagsinput(); .tagsinput('refresh') actioned on .tagsinput() input that's initialised new options given.
Comments
Post a Comment