鍍金池/ 問答/HTML5  iOS  HTML/ layui.upload.render 用js添加的html 點擊上傳無效

layui.upload.render 用js添加的html 點擊上傳無效

            $("#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=\"請輸入內(nèi)容\" 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>結(jié)束時間</div>" +
                        "<input type=\"text\" placeholder=\"請選擇結(jié)束時間\" 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>狀態(tài)</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;

                //執(zhí)行實例
                upload.render({

                    elem: '.videos' //綁定元素
                    ,url: '/upload/' //上傳接口
                    ,accept: 'video'
                    ,done: function(res){
                        //上傳完畢回調(diào)
                    }
                    ,error: function(){
                        //請求異?;卣{(diào)
                    }

                });

                upload.render({

                    elem: '.texts' //綁定元素
                    ,url: '/upload/' //上傳接口
                    ,done: function(res){
                        //上傳完畢回調(diào)
                    }
                    ,error: function(){
                        //請求異常回調(diào)
                    }

                });

                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]; //刪除對應(yīng)的文件
                          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]; //刪除文件隊列已經(jīng)上傳成功的文件
                        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'); //顯示重傳
                    }
                  });
                });
回答
編輯回答
囍槑

你可以把upload方法用一個function括起來,然后每次拼接完成后調(diào)用,拼接只能用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");//
                    
                    
2018年7月2日 04:55
編輯回答
任她鬧

我專門注冊了個號,就是來罵layui的,這他媽怎么上傳,js后追加的元素怎么點擊上傳,,你妹的。。

2017年12月18日 22:08