我使用以下方法在单击“addButton”时添加多个 div,如下面的 fiddle 所示:
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();
});
});
我必须使用 html 添加文本,然后附加它。 Bootstrap中有没有其他方法可以解决这个问题?
最佳答案
试试这个
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:
$(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();
});
});
关于jquery - 如何在bootstrap中添加动态div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17248110/