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

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

Bootstrap标签输入不与lazyload一起使用

1 个答案: