html
<div class="col-xs-12 col-sm-8" style="margin-left: 117px;margin-bottom: 13px;">
<button type="button" id="add_options2" style="background: green;color: #fff">添加选项</button>
<input type="hidden" value="1" id="num"> //这是为了动态绑定id使用
</div>
<div class="table1">
<div class="form-group table2" id="text2" >
<label class="control-label col-xs-12 col-sm-2" style="margin-right: 25px;margin-bottom: -25px;">选项:</label>
<div class="col-xs-12 col-sm-8" style="margin-left: -25px;">
<div class="input-group ">
<input type="text" style="width: 15%" name="row[form_options][]" class="form-control" placeholder="选项" >
<input id="c-avatar0" style="width: 85%" placeholder="请选择上传内容[图片，视频，音频]" class="form-control" size="50" name="row[form_options2]" type="text" value="">
<div class="input-group-addon no-border no-padding">
<span><button type="button" id="plupload-avatar0" class="btn btn-danger plupload" data-input-id="c-avatar0" data-multiple="false" data-preview-id="p-avatar0"><i class="fa fa-upload"></i> 上传</button></span>
<span><button type="button" id="fachoose-avatar0" class="btn btn-primary fachoose" data-input-id="c-avatar0" data-multiple="false"><i class="fa fa-list"></i> 选择</button></span>
<span class="btn del" style="background:red;color: #fff">删除</span>
</div>
<span class="msg-box n-right" for="c-avatar"></span>
</div>
<ul class="row list-inline plupload-preview" id="p-avatar0"></ul>
</div>
</div>
</div>js
api: {
bindevent: function () {
$(document).on("click", '#add_options2', function () {
var num=$('#num').val();
num++;
$('#num').val(num);
var html = "<div class=\"form-group table2\" >\n" +
" <label class=\"control-label col-xs-12 col-sm-2\">选项:</label>\n" +
" <div class=\"col-xs-12 col-sm-8\">\n" +
" <div class=\"input-group \">\n" +
" <input type=\"text\" style=\"width: 15%\" name=\"row[form_options][]\" class=\"form-control\" placeholder=\"选项\" >\n" +
"<input id=\"c-avatar"+num+"\"" +
" style=\"width: 85%\" placeholder=\"请选择上传内容[图片，视频，音频]\" class=\"form-control\" size=\"50\" name=\"row[form_options2]\" type=\"text\" value=\"\">\n" +
" <div class=\"input-group-addon no-border no-padding\">\n" +
" <span><button type=\"button\" id=\"plupload-avatar"+num+ "\"" +
"class=\"btn btn-danger plupload\" data-input-id=\"c-avatar"+num+ "\"" +
" data-multiple=\"false\" data-preview-id=\"p-avatar"+num+"\"" +
"><i class=\"fa fa-upload\"></i> 上传</button></span>\n" +
" <span><button type=\"button\" id=\"fachoose-avatar"+num+"\"" +
" class=\"btn btn-primary fachoose\" data-input-id=\"c-avatar"+num+"\"" +
" data-multiple=\"false\"><i class=\"fa fa-list\"></i> 选择</button></span>\n" +
" <span class=\"btn del\" style=\"background:red;color: #fff\">删除</span>\n" +
" </div>\n" +
" <span class=\"msg-box n-right\" for=\"c-avatar\"></span>\n" +
" </div>\n" +
" <ul class=\"row list-inline plupload-preview\" id=\"p-avatar"+num+"\"" +
"></ul>\n" +
" </div>\n" +
" </div>";
$('.table1').append(html);
Form.events.plupload("#add-form");//动态绑定上传按钮
Form.events.faselect("#add-form");//动态绑定选择附件按钮
});
//删除题目
$(document).on("click", '.del', function () {
$(this).parents('.table2').remove();
});
Form.api.bindevent($("form[role=form]"));
}
},
外附fastadmin10个动态渲染方法
组件 代码 介绍
文件上传 Form.events.plupload($(“form”)); 渲染并绑定form中的上传组件
动态下拉列表 Form.events.selectpage($(“form”)); 渲染并绑定form中的Selectpage组件
表单验证 Form.events.validator($(“form”)); 渲染并绑定form中的表单验证
城市选择 Form.events.citypicker($(“form”)); 渲染并绑定form中的城市选择组件
日期时间 Form.events.datetimepicker($(“form”)); 渲染并绑定form中的日期时间组件
下拉列表 Form.events.selectpicker($(“form”)); 渲染并绑定form中的Selectpicker组件
附件选择 Form.events.faselect($(“form”)); 渲染并绑定form中的选择附件组件
键值组件 Form.events.fieldlist($(“form”)); 渲染并绑定form中的键值组件
开关组件 Form.events.switcher($(“form”)); 渲染并绑定form中的开关组件
滑块组件 Form.events.slider($(“form”)); 渲染并绑定form中的滑块组件
如果是动态生成的元素，默认是没有绑定事件的，可以使用上述的代码进行绑定事件。其中$(“form”)为所需绑定事件元素的父级元素，并不限定为必须是一个form，也可以是个div或p元素。