layui弹出层页面层layer.open单选radio/下拉select/点击上传失效无效
点击领取淘宝京东拼多多唯品会优惠券
问题描述:
在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"></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>后面