这是我的html：
<div id="extraPerson">
<div class="controls controls-row">
<input class="span3" placeholder="First Name" type="text" name="firstname2">
<input class="span3" placeholder="Last Name" type="text" name="lastname2">
<select class="span2" name="gender2"><option value="Male">Male</option><option value="Female">Female</option></select>
...ETC
</div>
</div>
<a href="#" id="addRow"><i class="icon-plus-sign icon-white"></i> Add another family member</p></a>
这是我的jquery：
<script>
$(document).ready(function(){
$('#addRow').click(function(){
$("#extraPerson").slideDown();
});
})
</script>
#extraPerson隐藏在css中.
当链接被点击时,它会添加div.但是,我希望它每次点击链接时继续添加相同的div.我该怎么做？更好的是如果它将数字附加到表单输入名称.例如firstname3,firstname4等
解决方法
尝试这样：
HTML
创建一个模板extraPersonTemplate并使用它来进一步构建.添加一个容器tyo你的内容部分.
<div class="extraPersonTemplate">
<div class="controls controls-row">
<input class="span3" placeholder="First Name" type="text" name="firstname2">
<input class="span3" placeholder="Last Name" type="text" name="lastname2">
<select class="span2" name="gender2">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
<div id="container"></div>
JS
$(document).ready(function () {
$('<div/>',{
'class' : 'extraPerson',html: GetHtml()
}).appendTo('#container'); //Get the html from template
$('#addRow').click(function () {
$('<div/>',{
'class' : 'extraPerson',html: GetHtml()
}).hide().appendTo('#container').slideDown('slow');//Get the html from template and hide and slideDown for transtion.
});
})
function GetHtml() //Get the template and update the input field names
{
var len = $('.extraPerson').length;
var $html = $('.extraPersonTemplate').clone();
$html.find('[name=firstname]')[0].name="firstname" + len;
$html.find('[name=lastname]')[0].name="lastname" + len;
$html.find('[name=gender]')[0].name="gender" + len;
return $html.html();
}
小Css
.extraPersonTemplate {
display:none;
}
