layui.upload.render 用js添加的html 点击上传无效

Question

            $("#add_link").click(function(){
                var link_html = "<div class=\"linkAll_inn\">" +
                    "<div class=\"activity_theme\">" +
                        "<div class=\"activity_theme_text \"><span class=\"xing\">*</span>主讲人</div>" +
                        "<input type=\"text\" placeholder=\"请输入主讲人\" class=\"activity_theme_input w391 position17\" id=\"speaker\">" +
                    "</div>" +
                    "<div class=\"activity_theme \">" +
                        "<div class=\"activity_theme_text\"><span class=\"xing\">*</span>主讲人简介</div>" +
                        "<textarea placeholder=\"请输入内容\" class=\"activity_theme_area position-17\" id=\"speakerDesc\"></textarea>" +
                    "</div>" +
                    "<div class=\"activity_theme\">" +
                        "<div class=\"activity_theme_text \"><span class=\"xing\">*</span>来源</div>" +
                        "<input type=\"text\" placeholder=\"请输入来源\" class=\"activity_theme_input w391 position34\" id=\"source\">" +
                    "</div>" +
                    "<div class=\"activity_theme\">" +
                        "<div class=\"activity_theme_text\"><span class=\"xing\">*</span>开始时间</div>" +
                        "<input type=\"text\" placeholder=\"请选择开始时间\" id=\"demo-2\" class=\"activity_theme_input w191\" id=\"startDate\" value=\"\">" +
                    "</div>" +
                    "<div class=\"activity_theme\">" +
                        "<div class=\"activity_theme_text\"><span class=\"xing\">*</span>结束时间</div>" +
                        "<input type=\"text\" placeholder=\"请选择结束时间\" id=\"demo-4\" class=\"activity_theme_input w191\" id=\"endDate\">" +
                    "</div>" +
                    "<div class=\"activity_theme\">" +
                        "<div class=\"activity_theme_text\"><span class=\"xing\"></span>上传视频</div>" +
                        "<button class=\"fil_mp4 layui-btn videos\"><i class=\"layui-icon\">&#xe67c;</i>上传视频</button>" +
                    "</div>" +
                    "<div class=\"activity_theme\">" +
                        "<div class=\"activity_theme_text\"><span class=\"xing\"></span>添加文档</div>" +
                        "<div class=\"layui-upload\">" +
                          "<button type=\"button\" class=\"layui-btn layui-btn-normal fil_mp4\" id=\"testList\">选择多文件</button>" +
                          "<div class=\"layui-upload-list\">" +
                            "<table class=\"layui-table\">" +
                              "<thead>" +
                                "<tr><th>文件名</th>" +
                                "<th>大小</th>" +
                                "<th>状态</th>" +
                                "<th>操作</th>" +
                              "</tr></thead>" +
                              "<tbody id=\"demoList\"></tbody>" +
                            "</table>" +
                          "</div>" +
                          "<button type=\"button\" class=\"layui-btn\" id=\"testListAction\" style=\"background:#1a95f0;color:#fff;\">开始上传</button>" +
                        "</div>" +
                    "</div>" +
                    "<div class=\"hr_add\"></div>" +
                "</div>";

                $(".linkAll").append(link_html);
            });

            // 上传
            layui.use('upload', function(){
                var $ = layui.jquery;
                var upload = layui.upload;

                //执行实例
                upload.render({

                    elem: '.videos' //绑定元素
                    ,url: '/upload/' //上传接口
                    ,accept: 'video'
                    ,done: function(res){
                        //上传完毕回调
                    }
                    ,error: function(){
                        //请求异常回调
                    }

                });

                upload.render({

                    elem: '.texts' //绑定元素
                    ,url: '/upload/' //上传接口
                    ,done: function(res){
                        //上传完毕回调
                    }
                    ,error: function(){
                        //请求异常回调
                    }

                });

                var demoListView = $('#demoList');
                  var uploadListIns = upload.render({
                    elem: '#testList'
                    ,url: '${linkPrefix}/onlineClass/video' //上传接口
                    ,accept: 'file'
                    ,multiple: true
                    ,auto: false
                    ,bindAction: '#testListAction'
                    ,choose: function(obj){
                      var files = obj.pushFile(); //将每次选择的文件追加到文件队列
                      //读取本地文件
                      obj.preview(function(index, file, result){
                        var tr = $(['<tr id="upload-'+ index +'">'
                          ,'<td>'+ file.name +'</td>'
                          ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
                          ,'<td>等待上传</td>'
                          ,'<td>'
                            ,'<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
                            ,'<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
                          ,'</td>'
                        ,'</tr>'].join(''));

                        //单个重传
                        tr.find('.demo-reload').on('click', function(){
                          obj.upload(index, file);
                        });

                        //删除
                        tr.find('.demo-delete').on('click', function(){
                          delete files[index]; //删除对应的文件
                          tr.remove();
                        });

                        demoListView.append(tr);
                      });
                    }
                    ,done: function(res, index, upload){
                      if(res.code == 0){ //上传成功
                        var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                        tds.eq(3).html(''); //清空操作
                        delete files[index]; //删除文件队列已经上传成功的文件
                        return;
                      }
                      this.error(index, upload);
                    }
                    ,error: function(index, upload){
                      var tr = demoListView.find('tr#upload-'+ index)
                      ,tds = tr.children();
                      tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                      tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                    }
                  });
                });

Answer 1

你可以把upload方法用一个function括起来，然后每次拼接完成后调用，拼接只能用append,直接替换就只有最后一个有效，class不知道反正id是拼接生成的，你试试看，我也刚用，麻烦一大堆，-_-||

function uploadFile(id,number,name){
              upload.render({
                  elem: id
                  ,url: ''
                  ,auto: false //选择文件后不自动上传
                ,multiple: true    //多文件上传

}

twoInfo+='<div class="goodsImgs czl_slidImg slidImgUpload"><img src="images/404.png" alt="" /><div class="czl_imgShadow"><div class="goodsReplaceImg" id="czl_goodsTableUploads'+data[index].spec_value[i].id+'" >替换</div><div class="goodsDelImg">删除</div></div>';
                    twoInfo+='</td>';
                    twoInfo+='</tr>';

                    $(".tbody").append(twoInfo);
                    uploadFile("#czl_goodsTableUpload"+data[index].spec_value[i].id,1,"ddsd");//