我使用 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;">×</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"
from( $(InputsWrapper).append
) 文本输入删除链接显示和工作但是当添加 class="form-control"
删除每个输入字段不显示的链接!!
如何解决这个问题?
问题:
未运行演示:http://jsfiddle.net/K7jQ7/4/
没有表单控制的工作演示:http://jsfiddle.net/K7jQ7/2/
最佳答案
这是给你的 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
关于javascript - Bootstrap 3 : position absolute not work with form-control class,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24056298/