在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">&#xe655;</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">&#xe655;</i>上传';
                html +=           '</button>';
                html +=      '</td>';
                html += '</tr>';
                $('.document').last().after(html);
                w.uploadFun('.' + classnName);
            });
    }); 

})(jQuery,window);

</script>

如若时光萧瑟去丶
111 声望9 粉丝

weakChickenPeng.