欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

layui laydate 渲染失效问题,lay-key导致动态生成代码二次渲染失败

程序员文章站 2024-03-18 12:26:52
...

在开发中因为需要动态生成时间选择框,所以选择了layui的 laydate控件,但是遇到了生成的时间选择框点击无效的问题,然后再次render 时间选择器一闪就消失了,查了多方资料,找到了如下的解决方法
首先来看下写的demo代码
首先是 html代码

<div class="box">时间选择<input type="text" id="datePick"></div> <button onclick="addOne()">克隆</button>
    <div class="appendBox"></div>

然后是js代码

<script type="text/javascript">

    layui.use('laydate', function() {
            var datePick = layui.laydate;
            datePick.render({
                elem: '#datePick'
                ,type: 'datetime'
          });
        })
    //克隆一个节点
    function addOne(){
        var box = $(".box").eq(0).clone();
        $(".appendBox").append(box);
        layui.use('laydate', function() {
            var datePick = layui.laydate;
            //再次渲染
            datePick.render({
                elem: '#datePickClone'
                ,type: 'datetime'
          });
        })
    }
</script>

当点击克隆的时候就会生成一个新的输入框,这个输入框id为datePickClone,并且再次为刚克隆的节点进行时间控件的渲染,可是发现时间控件闪一下就消失,或者点击没反应,得切换下窗口回来才有反应,最后经过测试和查证发现
当我们点击了原始的时间插件后 ,laydate会给input框增加一个 lay-key=”1”
如下图
layui laydate 渲染失效问题,lay-key导致动态生成代码二次渲染失败
就是这个lay-key=1在作祟,我们只要把新克隆出来的节点,删掉这个lay-key属性,变正常了,删除属性可以使用 jquery的 removeAttr(“lay-key”)方法