Question

我使用Bootstrap 3和jQuery For Add输入字段。

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;">×</a>添加删除输入字段链接（position:absolute）。现在当点击添加新字段bootstrap 3时不显示删除链接。

我发现了这个问题：如果我们从（class="form-control"）文本输入中移除$(InputsWrapper).append，请删除链接显示和工作但是当添加class="form-control"删除链接时，不显示每个输入字段!! < / p>

如何解决这个问题？

问题：

enter image description here

无效DEMO：http://jsfiddle.net/K7jQ7/4/

在没有表单控件的情况下进行演示：http://jsfiddle.net/K7jQ7/2/

Answer 1

这里是你的小提琴

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

HTML CODE

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

});

更新后的内容

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

新更新的小提琴

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

bootstrap 3：position绝对不能使用表单控件类

1 个答案: