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

在开发中因为需要动态生成时间选择框,所以选择了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导致动态生成代码二次渲染失败_第1张图片
就是这个lay-key=1在作祟,我们只要把新克隆出来的节点,删掉这个lay-key属性,变正常了,删除属性可以使用 jquery的 removeAttr(“lay-key”)方法

你可能感兴趣的:(layui那些事,layui,laydate,渲染,动态生成)