jQuery 如何在引导程序中添加动态 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17248110/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add dynamic div in bootstrap?
提问by Tiny Jaguar
I have used the following way to add multiple div on clicking "addButton", as given in below fiddle :
我使用以下方法在单击“addButton”时添加多个 div，如下面的小提琴所示：
http://jsfiddle.net/harshmadhani/jpb93/
http://jsfiddle.net/harshmadhani/jpb93/
$(document).ready(function () {
var counter = 2;
$("#addButton").click(function () {
if (counter > 2) {
alert("Only 2 textboxes allowed");
return false;
}
$('<div/>',{'id':'TextBoxDiv' + counter}).html(
$('<label/>').html( 'Textbox #' + counter + ' : ' )
)
.append( $('<input type="text">').attr({'id':'textbox' + counter,'name':'textbox' + counter}) )
.appendTo( '#TextBoxesGroup' )
counter++;
});
$("#removeButton").click(function () {
if (counter == 1) {
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
});
I have to add the text using html and append it thereafter. Is there any other way to solve this issue in Bootstrap?
我必须使用 html 添加文本，然后附加它。在 Bootstrap 中还有其他方法可以解决这个问题吗？
回答by sangram parmar
Try this
尝试这个
html
html
<div class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">
Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email" />
</div>
</div>
</div>
jQuery:
jQuery：
$(document).ready(function () {
$("#addButton").click(function () {
if( ($('.form-horizontal .control-group').length+1) > 2) {
alert("Only 2 control-group allowed");
return false;
}
var id = ($('.form-horizontal .control-group').length + 1).toString();
$('.form-horizontal').append('<div class="control-group" id="control-group' + id + '"><label class="control-label" for="inputEmail' + id + '">Email' + id + '</label><div class="controls' + id + '"><input type="text" id="inputEmail' + id + '" placeholder="Email"></div></div>');
});
$("#removeButton").click(function () {
if ($('.form-horizontal .control-group').length == 1) {
alert("No more textbox to remove");
return false;
}
$(".form-horizontal .control-group:last").remove();
});
});
