關於layui動態生成文件上傳按鈕后點擊無效的解決辦法

首先，這是一個坑，大坑，網上一大堆寫的雲里霧里，不知所以，轉了一圈，除了copy就是copy，Jesus God，花了一晚上，走通了這個坑，話不多說，直接解決

layui版本： layui-v2.5.6 

jquery版本：jQuery v3.2.1 

問題：

上傳多個商品的時候，后續的表單需要動態生成，其中包括上傳文件按鈕，獲取文件。可是動態上傳后，改上傳按鈕沒有作用。我不是專業的前端，沒有深入分析，直接說明解決方法，至於原理啥的，如果幫助了你，麻煩告知。

 

 

 

點擊增加的時候，動態生成表單

 

 

 

 具體做法，首先，動態生成的id需要動態拼接，保持唯一性，在拼接完成后，重新將upliad.render(...)的所有邏輯調用一遍。期間元素選擇用id，這個很重要！！！！

封裝成方法：

function uploadImgRender(e,showImg,uploadimd){
           var uploadImg = upload.render({
            elem: e
            , url: '' //改成您自己的上傳接口
            , before: function (obj) {
                //預讀本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    console.log(uploadImg);
                    $(showImg).attr('src', result); //圖片鏈接（base64）
                });
            }
            , done: function (res) {
                //如果上傳失敗
                if (res.error > 0) {
                    return layer.msg('上傳失敗');
                }
                //上傳成功
                if (res.error == 0) {
                    console.log(uploadImg)
                    $(uploadimd).html(res.url);
                    return layer.msg('上傳成功');
                }
            }
            , error: function () {
                //演示失敗狀態，並實現重傳
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-xs demo-reload">重試</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadImg.upload();
                });
            }
        });

　動態生成后點擊：

HTML增加按鈕：
 <button class="layui-btn" type="button" id="addSpecification" data-type="addMM">增加</button>

js：

      var count = 1;
        var addM = {
            addMM: function () {
                count += 1;
                var newInput ="<hr/><div class=\"layui-form-item\">\n" +
                        "                            <label for=\"phone\" class=\"layui-form-label\">\n" +
                        "                                <span class=\"x-red\"></span>商品圖片</label>\n" +
                        "                            <div class=\"layui-upload\">\n" +
                        "                                <button type=\"button\" class=\"layui-btn imgUpload_\" data-type=\"imgUpload_R\" id=\"imgUpload_"+count+"\">上傳圖片</button>\n" +
                        "                                <div class=\"layui-word-aux\">\n" +
                        "                                    <span class=\"x-red\">*</span>單圖上傳，尺寸建議750x750\n" +
                        "                                </div>\n" +
                        "                            </div>\n" +
                        "                        </div>\n" +
                        "                        <div class=\"layui-form-item\">\n" +
                        "                            <label for=\"phone\" class=\"layui-form-label\">\n" +
                        "                                <span class=\"x-red\"></span></label>\n" +
                        "                            <div class=\"layui-upload-list\">\n" +
                        "                                <img class=\"layui-upload-img\" id=\"imgUpload_"+count+"_\">\n" 
         　　　　　　　　　　　　　　　　　　　　　　　　　　<p id=\"imgUpload_goods_"+count+"\"></p>\n" +
"                            　　　　　　　　　　　　</div>\n" +
"                        　　　　　　　　　　　　　　</div>\n" ;
                $('#multipleSpecifications').append(newInput);

//這個很重要。雖然冗余了，但是木有辦法

                uploadImgRender("#imgUpload_"+count,"#imgUpload_"+count+"_","#imgUpload_goods_"+count);
            }
        };
          //動態加載元素用
        $('#addSpecification').on('click', function () {
            var othis = $(this), type = othis.data('type');
            addM[type] ? addM[type].call(this, othis) : '';
        });