layui弹出层页面层layer.open单选radio/下拉select/点击上传失效无效
未知
2023-11-22 11:12:42
0

  问题描述:

        在tp5中使用layui弹出层,在一个点击按钮的事件上弹出模态框,实现表单。1,单选点击无效。2,下拉有数据但没展示出来;3,上传图片按钮点击无效没反应,打不开文件夹
点击按钮:
<button class="layui-btn" id="add">申请</button>

模态框:

<div class="layui-panel" id="finance"  style="display:none;">
            <div style="padding:30px">                
            <form  class="layui-form layui-form-pane" >      
                   <div class="layui-form-item">
                           <label class="layui-form-label">付款人</label>
                           <div class="layui-input-block">
                                <input type="text" name="payer" placeholder="付款人" value="{$nick_name}" class="layui-input" >
                           </div>
                   </div>
                 <div class="layui-form-item">
                  <label class="layui-form-label">所属类别</label>
                  <div class="layui-input-block">
                    <select name="type_id">
                      <option value="">下拉选择</option>
                       {volist name="cosplaytype_list" id="vo"}
                       <option value="{$vo.id}">{$vo.title}</option>
                       {/volist}
                    </select>
                  </div>
                </div>
                  <div class="layui-form-item">
                     <label class="layui-form-label">上传图片</label>
                     <div class="layui-input-block">
                         <button type="button" class="layui-btn" id="uploadClick">
                         <i class="layui-icon">&#xe67c;</i>上传图片
                      </button>
                      <div class="layui-upload-list">
                          <img class="layui-upload-img" width="100px" height="100px" id="showPic">
                          <p id="demoText"></p>
                      </div>
                        <input type="hidden" name="thumb" id="pichidden">
                     </div>

                  </div>
                  <div class="layui-input-block">
                    <button lay-submit lay-filter="myform" class="btn btn-danger">提交申请</button>
                  </div>
            </form>
            </div>
        </div>
<!--点击事件script:-->
$("#add").click(function(){
            layer.open({
                type:1,
                title:"申请",
                skin: 'layui-layer-rim', //加上边框            
               content: $("#finance").html(),
               success:function(e){               
                  form.render('select');
                }
            })
        })

解决办法:

弹出层属于动态加载DOM,打开一个页面,整个dom都加载完了,再点击弹出层就属于新增了一个dom。
又比如 jq的append()函数添加了dom后就属于动态加载,想要获取id或者class 需要使用 $(document).on('click','#table',function(){})
第一,看看layui-form, 一定要有。
第二,再看看content: $("#finance").html(); 把html()去掉试试
第三,或者使用
form.render()更新全部表单
      content: $("#show_editprompt").html(),
       //打开弹出层时success生效后刷新表单,渲染页面
        success:function(e){
          form.render('select');或者form.render()
       }

第四,如果使用了模板继承include 或者block。把 id="finance" 弹出层div放置到 base.html 文件的</body>后面

相关内容

云服务器上Kubernet...
本文介绍了在云服务器上搭建Kubernetes集群的实战过程,包括...
2024-11-20 17:00:41
云服务器上Kubernet...
本指南详述了云服务器上Kubernetes集群的部署与运维步骤,包...
2024-11-20 16:23:44
Kubernetes在云服...
Kubernetes性能优化策略包括:资源合理分配、节点自动扩展、...
2024-11-20 16:00:41
高效Kubernetes集...
摘要: 高效Kubernetes集群部署需分析需求、规划资源、配...
2024-11-20 15:23:41
云服务器上Kubernet...
摘要:本文详解了云服务器上Kubernetes集群的部署方案,包括...
2024-11-20 15:00:48
云上Kubernetes集...
摘要:本文详述了云上Kubernetes集群的部署流程及优化策略,...
2024-11-20 14:46:37

热门资讯

JavaScript获取当前协... JavaScript获取当前协议,域名,路径
解决Phpcms V9手机门户... 第一步:开启手机网站。位置:模块 》手机门户 》 添加手机站点,如果模块里面没有手机门户,那么就在模...
layui tooltip提示... 在layui表单中,我们想把一个标签做出提示,以标明这个表单元素是做什么有什么功能时,就可以用上提...
layui中出错Unexpec... layui中出错Unexpected identifier
如何在html中禁止复制文字 问题描述: 如何禁止别人复制自己的文章? 解决办法: 在body标签中添加以下代码: onconte...
JS实现html打印功能,打印... !DOCTYPE htmlhtmlhead meta charset=utf-8 title打印功能...
bootstrap 图片文字居... 问题描述: 让图片和文字居中显示。 解决办法: !-- style--.navbars img{ m...
bootstrap图片排版布局 问题描述: 在使用bootstrap的时候,出现了这样的问题。 排版对不齐。 解决办法: 通过上图发...
手机端底部定位 问题描述: 需要实现的效果 解决办法: !-- 底部 -- div class=layui-row ...