【layer弹出层】content引入html,当html结构变化,弹窗会动态加载吗?

提问 已结 18 694
无知即罪恶
悬赏:20飞吻
版本:layui 3.1.1 浏览器:chrome
需求是上传多个附件(页面显示文件名+删除按钮),效果如下:


html写好初始弹框结构,layer.open()content引入html。文件上传后jQuery有个change事件,遍历拿到文件名,append页面。

问题:console.log显示html有改变,layer.open弹窗页面没反应。弹窗页面怎么刷新呢?是刷新的问题吗?或者还有什么更好的实现方式

浏览器f12截图如下:
http://img.neilz.cn/2020/03/25/57daa4f8c347af7ca805c8f18f91ac26.jpg
回帖
  • @无知即罪恶
    var $wrapper = $('<div id="wrapper"><div class="content"></div></div>'),
    $content = $wrapper.children(".content")
    $wrapper.appendTo('body')
    layer.open({
    type:1,
    title: 'XXX标题',
    content: $wrapper,
    skin: 'layui-layer-lan',
    area: ['500px','300px'],
    btn: ['确定'],
    yes: function(index,o){
    layer.close(index)
    },
    anim: 1
    });
    setTimeout(()=>{
    $content.html('<p>我是新内容</p>')
    },3000)
    0 回复
  • IDyun
    2020-3-25
    <script type="text/html" id="htmlTpl">
    html 代码片段
    </script>
     layer.open({
    type: 1
    ,content:$('#htmlTpl').html()
    ,success: function(layero){
    layero.find(....).change(function)
    }
    })
    使用这种模板方法可避免大部分问题。
    0 回复
  • @IDyun 谢谢提供思路,刚接触layer没细看文档,这个suceess回调是先于yes回调的对吧。
    0 回复
  • @IDyun 我先去codeing了,没问题等下就回采纳的。
    0 回复
  • @IDyun 我用你这个模板change放在success里面,还是不行。
    0 回复
  • IDyun
    2020-3-25
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all">
    <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
    </head>
    <body>
    <script type="text/html" id="htmlTpl">
    <div id='filse'>

    </div>
    <input type="file" name="file" id="test20">
    </script>
    <script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
    <script>
    layui.use('layer', function(){ //独立版的layer无需执行这一句
    var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
    layer.open({
    type: 1 ,area: ['390px', '260px']
    ,content:$('#htmlTpl').html()
    ,success: function(layero){
    $(':file[name="file"]').change(function(){
    $('#filse').append('文件<br>');
    })

    }
    })

    });
    </script>

    </body>
    </html>
    0 回复
  • 你append操作是在layer.open()之前还是之后?
    如果之前
    layer.open({
    type: 1
    ,content:$('#xxxid').html()
    });
    如果之后
    那你需要关掉之前那个,然后重新调用layer.open()
    0 回复
  • @我就填特殊字符 是在open后。open后的弹窗页面上,上传文件后append相关元素。
    0 回复
  • 给你个思路,你可以在open之前 利用jq先映射对象到DOM,内存里面保存对你要操作的dom的引用,然后弹窗显示后对引用通过进行DOM操作,就没有问题,会渲染到页面上的
    0 回复
  • 友情提示代码里面不要重复的构建jq对象,比较费浏览器体力
    0 回复