关于layui使用弹出层模版后对应上传组件不工作的问题记录

发布时间 2023-11-30 13:24:26作者: ukyo--BlackJesus

image
这里页面的聊天室是使用的弹出层:

util.on('lay-on', {
                'open-chat-room': function () {
                    layer.open({
                        title: '项目聊天室',
                        type: 1,
                        offset: 'b',
                        anim: 'slideUp', // 从下往上
                        area: ['100%', '460px'],
                        shade: 0.1,
                        shadeClose: true,
                        id: 'ID-demo-layer-direction-b',
                        content: '<div class="col-md-7" style="float: left">' +
                            '<div class="panel panel-default"><div class="panel-heading">' +
                            '<i class="fa fa-tasks" aria-hidden="true"></i> Team Communicate (@选择提醒用户#选择task)</div><div><div id="chat-log" class="col-md-10" contenteditable="false" style="resize:none;height: 300px;background-color: floralwhite;align:top;overflow: auto;">' +
                            '</div>' +
                            '<div class="col-md-2" style="float: right">online用户: <div>' +
                            '<ul id="chatMembers"></ul></div></div></div>' +
                            '<div class="col-md-4" style="float: right;padding-top: 0%">' +
                            '<div id="atMembers" style="position: absolute" class="elementList" hidden="hidden">' +
                            '<ul id="atMembersUl" class="elementList2"></ul></div>' +
                            '<div id="atTasks" style="position: absolute" class="col-xs-4 elementListTask" hidden="hidden"><ul id="atTasksUl" class="elementList2Task"></ul></div>' +
                            '<input id="chat-message-input" oninput="msginputOnchange(event,this)" type="text" placeholder="聊天信息发送" onblur="closeInputChooseElements()"/><br/>' +
                            '<input id="chat-message-submit"  type="button" value="Send"/></div></div></div>' +

                            '<div class="col-md-4" style="float: right">' +
                            '<button type="button" class="layui-btn demo-class-accept" lay-options="{accept:"file"}">' +
                            '<i class="layui-icon layui-icon-upload"></i>上传文件</button></div>'

                    });
                    chatRoomSetup()
                },
                'test-offset-l': function () {
                    layer.open({
                        type: 1,
                        offset: 'l',
                        anim: 'slideRight', // 从左往右
                        area: ['320px', '100%'],
                        shade: 0.1,
                        shadeClose: true,
                        id: 'ID-demo-layer-direction-l',
                        content: '<div style="padding: 16px;">任意 HTML 内容</div>'
                    });
                }
            });

可以看到对应聊天室的代码在content之后,也就是弹出层里,但聊天室的功能正常,比如检测websocket,输入和@人,但是加入的上传模块却不起效(已经在外层html加入试过是可以的)。
对应layui官方文档中的这个上传还有一段js代码,我附在了上面代码之外最后,但是页面打开弹出层之后,点击上传文件没有反应,也没有任何报错等,