layui 动态添加的元素事件

最新推荐文章于 2025-03-25 09:30:06 发布

xuxiaopang0417

最新推荐文章于 2025-03-25 09:30:06 发布

阅读量7.3k

点赞数 1

分类专栏：技术分享

本文链接：https://blog.youkuaiyun.com/xuxiaopang0417/article/details/96118281

版权

技术分享专栏收录该内容

23 篇文章

订阅专栏

 <div class="layui-form-item">
            <div class="layui-input-block">
                <label><input class="layui-btn" type="button" data-method="addInput" value="add"></label>
            </div>
        </div>
        <div  id="hahaha">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">分间名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="between_name" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">分间面积</label>
                <div class="layui-input-inline">
                    <input type="text" name="points_etam" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">窗户朝向</label>
                <div class="layui-input-inline">
                    <input type="text" name="window_towards" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">窗户类型</label>
                <div class="layui-input-inline">
                    <input type="text" name="paper_type" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <input type="button" value="del" data-method="delInput" class="layui-btn">
        </div>
        </div> 
 layui.use(['form','layer','laydate','upload'], function(){
    var active = {
                addInput: function () {
                    var newInput =
                        '<div class="layui-form-item">\n' +
                        '\t<label class="layui-form-label">分间名称:</label>\n' +
                        '\t<div class="layui-input-inline">\n' +
                        '\t\t<input type="text" name="between_name" class="layui-input">\n' +
                        '\t</div>\n' +
    
                        '\t<label class="layui-form-label">分间面积:</label>\n' +
                        '\t<div class="layui-input-inline">\n' +
                        '\t\t<input type="text" name="points_etam" class="layui-input">\n' +
                        '\t</div>\n' +
    
                        '\t<label class="layui-form-label">窗户朝向:</label>\n' +
                        '\t<div class="layui-input-inline">\n' +
                        '\t\t<input type="text" name="window_towards" class="layui-input">\n' +
                        '\t</div>\n' +
    
                        '\t<label class="layui-form-label">窗户类型:</label>\n' +
                        '\t<div class="layui-input-inline">\n' +
                        '\t\t<input type="text" name="paper_type" class="layui-input">\n' +
                        '\t</div>\n' +
    
                        '\t<input type="button" value="del" data-method="delInput" class="layui-btn">\n'+
                        '</div>';
                        $('#hahaha').append(newInput);
        },
        delInput: function (othis) {
            othis.parent().remove();
        }
    };
    //已加载完的元素用
    $('.layui-btn').on('click', function () {
        var othis = $(this), method = othis.data('method');
        active[method].call(this, othis);
    });
    //动态加载元素用
    $('#hahaha').on('click','.layui-btn', function () {
        var othis = $(this), method = othis.data('method');
        active[method].call(this, othis);
    });
    </script>