引导标签输入不适用于延迟加载答案

【问题标题】：Bootstrap tags input not working with lazyload引导标签输入不适用于延迟加载
【发布时间】：2014-09-03 18:29:43
【问题描述】：

我有一个模式，通过单击页面上的多个图像中的任何一个来启动，其中有一个输入字段，我正在尝试对其应用 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 属性分配给以下输入字段：

<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">

【问题讨论】：

标签： jquery jquery-lazyload bootstrap-tags-input

【解决方案1】：

仅在输入字段中添加 data-role 是不够的 - 因为您是动态添加它，所以您需要像这样初始化 bootstrap-tags-input：

$(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");
});

【讨论】：