Layui Layer在open弹出层中异步加载数据和form表单radio、checkbox、select不渲染，不可点击的解决办法

最新推荐文章于 2023-05-19 15:29:34 发布

LANG-ITTECHNOGY

最新推荐文章于 2023-05-19 15:29:34 发布

阅读量2k

点赞数 2

分类专栏： layui 文章标签： layui

原文链接：https://blog.csdn.net/qq_34873338/article/details/78726167

版权

layui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Layui Layer在open弹出层中异步加载数据和form表单radio、checkbox、select不渲染，不可点击的解决办法

我们知道在使用layui的form表单元素中的radio、checkbox、select控件时需要使用layui.use([“form”])加载form表单模块，并使用时form.render()函数进行渲染。

而layer.open调用时的是静态html代码，所以在layui.open代码执行之后，需要调用
form.render()进行渲染。

同样的道理，如果我们需要在弹出的界面中显示异步加载的数据，那么需要先执行异步数据的加载到Html中，再使用layer.open应用加载后的html即可。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui.form小例子</title>
    <link rel="stylesheet" href="lib/layui/css/layui.css" media="all">
    <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<button onclick="add()" id="dadsa">添加</button>
<script type="text/html" id="addForm">
    <form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">下拉选择框</label>
            <div class="layui-input-block">
                <select name="interest" lay-filter="aihao">
                    <option value="0">写作</option>
                    <option value="1">阅读</option>
                </select>
            </div>
        </div>
        <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
    </form>
</script>

<script src="lib/layui/layui.js"></script>
<script>
    layui.use('form', function(){
        var form = layui.form;
        $("#dadsa").click(function () {
            layer.open({
                type: 1,
                title:"警情登记录入界面",
                skin: 'layui-layer-demo', //样式类名
                area: ['636px', '451px'],
                btnAlign: 'c',
                anim: 2,
                content:layui.$("#addForm").html()
            });
            form.render();
        });
    });
</script>
</body>
</html>