layui upload动态绑定

插件 layui . use ( 'upload' ,  function (){})

只能在页面加载时绑定,所以想动态绑定,就很麻烦了,新加的元素触发不了 layui upload; 这时我们可以先绑定一个元素,来触发这个上传插件,然后新增加的元素,来触发事先绑定的元素

补充:点击的时候,我可以用that=$(this);来获取点击的元素,这样就容易定位点击的哪了.不懂的可以私信,亲测已经成功

<</span>strong class="col-sm-3 control-label">规格项:</</span>strong>
<</span>div class="col-sm-9">
<</span>div class="searchBox item_image">
<</span>span class="addSearch plus">+</</span>span> <</span> <</span>img src="/static/admin/img/add-button.jpg" alt="" style="width: 5%;height: 5%" class="item_image_btn"> <</span>img class="item_image_img layui-upload-img" alt="请上传图片"> </</span>div> </</span>div> <</span>div class="layui-upload" style="text-align: center"> <</span>button type="button" class="item_image_btns" style="display: none">上传图片</</span>button> </</span>div>

$('.col-sm-9 ').on('click','.searchBox .addSearch',function(){
var ele = $(this).closest('.searchBox');
if($(this).is('.plus')){
var than = this;
if($('.searchBox:last-child').find('.superior').val() != 0){

var html='

-  ';
html+= '<"img" src="/static/admin/img/add-button.jpg" alt="" style="width: 5%;height: 5%" class="item_image_btn"> 请上传图片 ">';
//html+='

规格图片

';
var  obj =  $( html);
obj. find( ".item_image_btn"). bind( 'click', on_up_click);
$( than). closest( '.col-sm-9'). append( obj);
} else{
alert( " 请添加规格！ ");
return;
}
} else{
ele. remove()
}
});

$(".item_image_btn").bind('click',on_up_click);
function on_up_click() {
thas=$(this);
$('.item_image_btns').click()
}

layui.use('upload', function(){
upload = layui.upload;
//执行实例
//普通图片上传
var uploadInst = upload.render({
elem: '.item_image_btns'
,url: url
,exts:'gif|jpg|jpeg|png|bmp'
,data:{upload_allowext:'gif|jpg|jpeg|png|bmp'}
,before: function(obj){
layer.load();
}
,done: function(res){
if(res.code == 1){

thas.closest('.item_image').find("input[name='item_image[]']").val(res.data);
thas.closest('.item_image').find(".item_image_img").attr('src', res.data); //图片链接（base64）
}else {
//如果上传失败
layer.msg(res.msg);
}
//上传成功
layer.closeAll('loading'); //关闭loading
}
});

});

分享：