关于动态添加的上传按钮点击失效的问题

提问 未结 12 323
yshjshxxn
yshjshxxn 2020-6-24
悬赏:20飞吻
版本:layui 2.5.6 浏览器:360,火狐,Chrome
在页面加载的时候,会根据读取的数据,循环出之前已经添加过的数据,一条一行,每个都有上传按钮。这些页面一开始就加载上传按钮,点击是没有问题的,可以对应每一行打开选择文件的窗口,也能正常上传。
现在有个动态添加行的按钮,点击后在以上行末尾新增加一行或多行,新增的上传按钮无法点击,没有相应。在社区里看了很多贴,都没有用。试过很多办法:
第一种办法:页面加载时,加载代码,动态新增的无法使用。
第二种办法:页面加载时,加载代码,然后在新增动态行的按钮onclick事件中,又渲染一次,这个时候出现:先点击已经加载的上传按钮,一切正常,再点击新增的动态上传按钮,也可以使用,然后再点击之前的按钮,就无响应了。
试了很多办法,好像都没有用。不知道怎么解决。
(function () {
layui.use('upload', function() {
var uploadInst = upload.render({
elem: '.btn-upload'
, auto: false
, acceptMime: 'image/pjpeg'
, bindAction: '#upfile'
, multiple: true
, size: 2048
, url: '/upload/uploadFile/'
, choose: function (obj) {
fileslist = obj.pushFile(); //将每次选择的文件追加到文件队列
len = getJsonLength(fileslist);
var option_list = $(".subRule option:selected"),
uploadmax = option_list.eq(listid).data("uploadmax"),
filenum = $(".filelist").eq(listid).find("li").length;
if (filenum >= uploadmax || len > (uploadmax - filenum)) {
layer.alert("该项最大可上传 " + uploadmax + " 张材料!", {icon: 5, title: ['提示']});
} else {
$('#upfile').click();
}
obj.preview(function (index, file, result) {
delete fileslist[index];
});
}
, done: function (res) {
var option_list = $(".subRule option:selected"),
cid = option_list.eq(listid).val(),
isreupload = option_list.eq(listid).data("isreupload");
if (res.code > 0) {
if (isimgfile(res.data['url']) == 0) {
layer.msg('材料上传成功!', {icon: 6, title: ['提示']});
var p = "<li><a href='/" + res.data['url'] + "' title='" + res.data['alt'] + "' target='_blank'><img alt='" + res.data['alt'] + "' src='/" + res.data['url'] + "' /></a><a class=\"red btn-del\" href='javascript:;'>删除</a></li>";
$(".filelist").eq(listid).append(p);
var files = $("input[name='fileList[]']").eq(listid).val();
files += '|' + res.data['alt'] + ':' + res.data['url'];
$("input[name='fileList[]']").eq(listid).val(files);
countfiles();
} else {
layer.alert("上传的材料,和其它行中的材料有重复!", {icon: 5, title: ['提示']});
}

} else {
layer.msg('上传失败:' + res.message, {icon: 5, title: ['提示']});
}
}
, error: function (index) {
layer.msg(index);
uploadInst.upload();
}
});
});
});
$(function () {
$("#clone-btn").click(function () {
var el = $(".clone-form").eq(0).clone(),i=0;
el.find(".filelist").empty();
el.find(".uploadshow").empty();
el.find("input[name='fileList[]']").val('');
el.find(".btn-upload").hide();
el.find(".subRule").hide();
el.find('.form-warp').eq(2).find('.filebtn').append('<span class="btn btn-danger delet">删除</span>');
el.insertBefore("#clone-btn-warper");

var formnum = $("body").eq(0).find(".clone-form").length
el.find(".btn-upload").attr('id','uploadbt_'+(formnum-1));

var uploadInstid = idupload.render({
elem: '#uploadbt_'+(formnum-1)
, auto: false
, acceptMime: 'image/pjpeg'
, bindAction: '#upfile'
, multiple: true
, size: 2048
, url: '/upload/uploadFile/'
, choose: function (obj) {
fileslist = obj.pushFile(); //将每次选择的文件追加到文件队列
len = getJsonLength(fileslist);
var option_list = $(".subRule option:selected"),
uploadmax = option_list.eq(listid).data("uploadmax"),
filenum = $(".filelist").eq(listid).find("li").length;
if (filenum >= uploadmax || len > (uploadmax - filenum)) {
layer.alert("该项最大可上传 " + uploadmax + " 张材料!", {icon: 5, title: ['提示']});
} else {
$('#upfile').click();
}
obj.preview(function (index, file, result) {
delete fileslist[index];
});
}
, done: function (res) {
var option_list = $(".subRule option:selected"),
cid = option_list.eq(listid).val(),
isreupload = option_list.eq(listid).data("isreupload");
if (res.code > 0) {
if (isimgfile(res.data['url']) == 0) {
layer.msg('材料上传成功!', {icon: 6, title: ['提示']});
var p = "<li><a href='/" + res.data['url'] + "' title='" + res.data['alt'] + "' target='_blank'><img alt='" + res.data['alt'] + "' src='/" + res.data['url'] + "' /></a><a class=\"red btn-del\" href='javascript:;'>删除</a></li>";
$(".filelist").eq(listid).append(p);
var files = $("input[name='fileList[]']").eq(listid).val();
files += '|' + res.data['alt'] + ':' + res.data['url'];
$("input[name='fileList[]']").eq(listid).val(files);
countfiles();
} else {
layer.alert("上传的材料,和其它的材料有重复!", {icon: 5, title: ['提示']});
}

} else {
layer.msg('上传失败:' + res.message, {icon: 5, title: ['提示']});
}
}
, error: function (index) {
layer.msg(index);
uploadInstid.upload();
}
});

});
});
});
回帖