Ввод тегов начальной загрузки не работает с 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");
});

Я назначаю атрибуты value и data-role с 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");
});