laydate控件闪退和多次渲染无效

场景

使用layui前端框架，一个页面有多个时间控件，并且是动态添加，添加完成后，时间控件会出现闪退的情况，删除之后重新添加，不能重复渲染，点击不弹出日期选择弹窗

 

界面效果

 

 

完整代码

html代码

<div id="timeLimitGroup">
     <div class="layui-form-item">
           <div class="layui-inline"  id="timeLimitDiv-1">
                <label class="layui-form-label">限时策略</label>
                <div class="layui-input-inline" style="width:280px;">
                     <input type="text" class="layui-input" name="timeLimit-1" id="timeLimit-1" readolny>
                </div>
                <div class="layui-input-inline" style="margin-top:8px;width: 10px;">
                     <a href="javascript:;" onclick="addTimeLimit();return false;"><i class="layui-icon">&#58910;</i></a>
                </div>
           </div>          
     </div>                        
 </div>

js代码

var laydate = '';
layui.use(['form', 'element', 'layer', 'jquery', 'laydate'], function () {
      var form = layui.form,
      laydate = layui.laydate;
      laydate.render({
             elem: '#timeLimit-1'
             , type: 'time'
             , range: true
             ,trigger: 'click'
     });
});
function addTimeLimit() {
     var obj = document.getElementById("timeLimitGroup");
     var newnode = document.createElement("div");
     var len = $("#timeLimitGroup").children().length;                  
     newnode.innerHTML = '<div class="layui-inline" id="timeLimitDiv-' + (len + 1) + '" style="margin-bottom:10px"><label class="layui-form-label"></label><div class="layui-input-inline" style="width:280px;margin-right: 10px;"><input type="text" class="layui-input" id="timeLimit-' + (len + 1) + '" name="timeLimit-' + (len + 1) + '" lay-key="' + (len + 1) + '" readolny></div><div class="layui-input-inline" style="margin-top:8px;width: 10px;"><a href="javascript:;" onclick="deleteTimeLimit(' + (len + 1) + ');return false;"><i class="layui-icon">&#58880;</i></a></div></div>';
     obj.appendChild(newnode);
     $('#timeLimit-' + (len + 1)).removeAttr("lay-key");
     laydate.render({
           elem: '#timeLimit-' + (len + 1)
           , type: 'time'
           , range: true
           , lang: timelang
           ,trigger: 'click'
     });
}
function deleteTimeLimit(divID) {
     $("#timeLimitDiv-" + divID).parent().remove();
}

 

关键代码

1、添加属性   trigger: 'click'

2、渲染之前清除上一次渲染的'lay-key' 属性

     $('#timeLimit-' + (len + 1)).removeAttr("lay-key");