在layui的使用过程中,需要动态创建一行html元素,且其中动态创建的元素中存在可上传的button。这个时候就需要重新绑定button的上传事件,且在绑定过程中,不能重复之前的元素名。
可解决的方法,每次动态生成上传button时,获取现有button数量,且给新增button起class + 数量 的形式,重新为新增button绑定类名。
<table class="layui-table">
<tr class="document">
<td>
<input type="text" autocomplete="off" class="layui-input">
</td>
<td>
<button type="button" class="layui-btn upload upload1">
<i class="layui-icon"></i>上传
</button>
</td>
</tr>
<script>
(function($,w){
layui.use('upload', function(){
var upload = layui.upload;
w.uploadFun = function(element){
upload.render({
elem : element, //绑定元素
method : 'post',
url : "{:U('Project/itemAcceptanceUpload')}", //上传接口
auto : true, //选择文件后不自动上传
data : {
},
before: function(){
},
done: function(res){
var item = this.item; //获取到当前触发上传的元素
flag = (res.code == 200) ? 1 : 2;
info = res.msg;
if ( res.code == 200 ) {
$(item).siblings('p').html(res.data);
}
layer.msg(info,{icon:flag,time:1000});
},
error: function(){
},
accept: 'file',
size: 5120
});
};
w.uploadFun('.upload1');
$('#add').click(function(){
$('#uploadLen').val( parseInt($('#uploadLen').val()) + 1 );
var html = '',
len = parseInt( $('#uploadLen').val() ),
classnName = 'upload' + len;
html += '<tr class="document">';
html += '<td>';
html += '<input type="text" autocomplete="off" class="layui-input">';
html += '</td>';
html += '<td>';
html += '<button type="button" class="layui-btn upload ' + classnName + '">';
html += '<i class="layui-icon"></i>上传';
html += '</button>';
html += '</td>';
html += '</tr>';
$('.document').last().after(html);
w.uploadFun('.' + classnName);
});
});
})(jQuery,window);
</script>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。