解决Layui tpl模板渲染文件上传不起作用

Html

	


开始上传

关键代码：

JS

/**
 * Created by SummerGao on 16-11-7.
 */
layui.use('upload', function () {
    var upload = layui.upload;
    $(document).on('change', '.upload', function () {
        //上传接口
        var url = uploadServerPathWeChat+ "file/upload/receipt/receipt/receipt?isWeChat=1";
       
        //执行实例
        upload.render({
            elem: '#' + $(this).attr('id')//绑定元素
            , url: url 
            , accept: 'images'
            , multiple: false
            , auto: false
            , bindAction: '#fileUploadAction'
            , before: function (obj) {
                lay.msg("文件上传中....")
            }
            , done: function (res) { //上传完毕回调
              
            }
            , error: function () {   //请求异常回调
               
            }
        });

        //鼠标点击事件执行附件上传操作
        $("#fileUploadAction").click();
    });
   

});

关键代码：

$(document).on('change', '.upload', function () {
  
});

如果你的是下面这种写法会不起作用

$(".upload").on('change', function () {
  
});

>> $(".upload").on('change',      只能为页面现有的元素绑定点击事件，如果是动态生成的新的元素，是没有事件的

>> 而$(document).on('change', "指定的元素",function(){});方法则是将指定的事件绑定在document上，而新产生的元素如果符合指定的元素，那就触发此事件

转载于:https://my.oschina.net/zhenggao/blog/3078162