javascript - Bootstrap 3 : position absolute not work with form-control class

Question

我使用 Bootstrap 3 和 jQuery 添加输入字段。

HTML:

<div style="padding:30px;" class="form-group">
    <label for="files" class="col-lg-1 control-label">form</label>
    <div class="col-lg-9">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group input-group-md">    <span class="input-group-addon"><a class="help-box" rel="popover" data-placement="top" data-original-title="123" data-content=""><i class="fa fa-file-text"></i></a></span>

                    <div id="InputsWrapper">
                        <input id="docs" class="form-control" type="text" name="files[]" placeholder="">
                    </div>
                </div>
            </div><a style="float:right" href="#" id="AddMoreFileBox" class="fa fa-plus fa-2x margin-top-8">Add New Field</a>

        </div>
    </div>
</div>

JS:

$(document).ready(function () {

    var MaxInputs = 8; //maximum input boxes allowed
    var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID
    var AddButton = $("#AddMoreFileBox"); //Add button ID

    var x = InputsWrapper.length; //initlal text box count
    var FieldCount = 1; //to keep track of text box added

    $(AddButton).click(function (e) //on add input button click
    {
        if (x <= MaxInputs) //max input box allowed
        {
            FieldCount++; //text box added increment
            //add input box
            $(InputsWrapper).append('<div style="position:relative;"><input class="form-control" type="text" name="mytext[]" id="field" value="Text ' + FieldCount + '"/><a href="#" class="removeclass" style="position:absolute;right:0px;">&times;</a></div>');
            x++; //text box increment
        }
        return false;
    });

    $("body").on("click", ".removeclass", function (e) { //user click on remove text
        if (x > 1) {
            $(this).parent('div').remove(); //remove text box
            x--; //decrement textbox
        }
        return false;
    })

});

我添加删除输入字段链接 ( a href="#" class="removeclass" style="position:absolute;right:0px;">&times;</a> ) 和 position:absolute .现在当点击添加新字段 bootstrap 3 时不显示删除链接。

我发现了这个问题:如果我们删除 class="form-control" from( $(InputsWrapper).append ) 文本输入删除链接显示和工作但是当添加 class="form-control"删除每个输入字段不显示的链接!!

如何解决这个问题？

问题:

未运行演示:http://jsfiddle.net/K7jQ7/4/

没有表单控制的工作演示:http://jsfiddle.net/K7jQ7/2/

Answer 1

这是给你的 js fiddle

http://jsfiddle.net/pragneshok/K7jQ7/1/

HTML 代码

<div style="padding:30px;" class="form-group">
    <label for="files" class="col-lg-1 control-label">form</label>
    <div class="col-lg-9">
        <div class="row">
            <div class="col-lg-6" id="cnt">
                <div class="input-group input-group-md">    <span class="input-group-addon"><a class="help-box" rel="popover" data-placement="top" data-original-title="123" data-content=""><i class="fa fa-file-text"></i></a></span>

                    <div id="InputsWrapper">
                        <input id="docs" onclick="openKCFinder(this)" class="form-control" type="text" name="files[]" placeholder="">
                    </div>
                </div>
            </div><a style="float:right" href="#" id="AddMoreFileBox" class="fa fa-plus fa-2x margin-top-8">Add New Field</a>

        </div>
    </div>
</div>

jQuery 代码:

$(document).ready(function () {

    var MaxInputs = 8; //maximum input boxes allowed
    var InputsWrapper = $("#cnt"); //Input boxes wrapper ID
    var AddButton = $("#AddMoreFileBox"); //Add button ID

    var x = InputsWrapper.length; //initlal text box count
    var FieldCount = 1; //to keep track of text box added

    $(AddButton).click(function (e) //on add input button click
    {
        if (x <= MaxInputs) //max input box allowed
        {
            FieldCount++; //text box added increment
            //add input box
            $(InputsWrapper).append('<div class="input-group input-group-md">   <span class="input-group-addon"><a data-content="" data-original-title="123" data-placement="top" rel="popover" class="help-box"><i class="fa fa-file-text"></i></a></span><div id="InputsWrapper"><input type="text" placeholder="" name="files[]" class="form-control" onclick="openKCFinder(this)" id="docs"></div></div>');
            x++; //text box increment
        }
        return false;
    });

    $("body").on("click", ".removeclass", function (e) { //user click on remove text
        if (x > 1) {
            $(this).parent('div').remove(); //remove text box
            x--; //decrement textbox
        }
        return false;
    })

});

更新的 FIDDLE

http://jsfiddle.net/pragneshok/K7jQ7/3/

新更新的 fiddle

http://jsfiddle.net/pragneshok/K7jQ7/5/