Вход тега Bootstrap не работает с lazyload

Question

У меня есть модальный, который запускается нажатием любого из нескольких изображений на странице, где есть поле ввода, к которому я пытаюсь применить bootstrap-tagsinput.

$(document).on("click","a.lazy",function(){   
     $("#form").find(".title").attr('value',$(this).find(".title").val()); 
     $("#form").find(".title").attr('data-role','tagsinput'); 
     $("#form").modal("show"); 
}); 

Я присваивая значение и дата-роль атрибутов с LazyLoad к следующему полю ввода:

<div class="input-group"> 
    <span class="input-group-addon">Tags</span> 
    <input type="text" class="form-control title" placeholder="Enter Tags for the Image" name="title"> 
</div> 

После того, как я запускаю модальный я могу видеть, что атрибуты присутствуют, но теги не являются применяется. Что я делаю не так?

<input type="text" class="form-control title" placeholder="Enter Tags for the Image" name="title" value="yellow" data-role="tagsinput"> 

Answer 1

Просто добавив data-role не достаточно, чтобы поле ввода - потому что вы добавляете динамически необходимо инициализировать бутстраповские-теги-вход так:

$(document).on("click","a.lazy",function(){   
     $("#form").find(".title").attr('value',$(this).find(".title").val()); 
     $("#form").find(".title").attr('data-role','tagsinput'); 

     // Destroy all previous bootstrap tags inputs (optional) 
     $('input[data-role="tagsinput"]').tagsinput('destroy'); 
     // Create the bootstrap tag input UI 
     $('input[data-role="tagsinput"]').tagsinput('items'); 

     $("#form").modal("show"); 
});