LayerDate日期插件渲染多个class出现闪现问题解决方案

徊忆羽菲

于 2020-10-22 19:25:28 发布

阅读量582

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Javascript Html

本文链接：https://blog.youkuaiyun.com/guo_qiangqiang/article/details/109228607

Html 同时被 2 个专栏收录

261 篇文章

订阅专栏

Javascript

243 篇文章

订阅专栏

当使用LayerDate日期插件在表单中动态添加行时，由于lay-key属性冲突导致日期插件闪现。博客提出了一个解决方案：在渲染时删除lay-key属性，确保每个实例的唯一性，从而避免冲突。通过动态克隆并添加行，并对每个新增元素重新渲染layDate，同时移除lay-key属性，成功解决了日期插件的闪现问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

LayerDate日期插件渲染多个class出现闪现问题解决方案

填写表单的时候有时候会需要添加一行表单的业务逻辑，而表单要用到LayerDate的话便不可避免的出现多个class的情况

这种情况下后面的class是无法渲染的，layerDate官网提出了解决方法：

//同时绑定多个
lay('.test-item').each(function(){
  laydate.render({
    elem: this
    ,trigger: 'click'
  });
});

但是这种方法依然不能解决，因为layDate 初始化的时候会自动生成一个 lay-key=""，直接复制代码会把这个 lay-key 也一起复制过来，但是页面中如果有 lay-key 的值相同，就会发生冲突，造成弹窗一闪而过的效果。

如何解决呢？只用渲染的时候将lay-key属性删掉就可以了：

　//添加一行
    function add() {
        var $tr = $("#getContent").clone();
        $("#list").append($tr);
        //重新分配lay-key
        lay('.test-item').each(function(){ 
　　　　　　　　　　　　　laydate.render({ 
　　　　　　　　　　　　　　elem: this ,
　　　　　　　　　　　　　　trigger: 'click'
　　　　　　　　}); 

　　　　　　　　$('.test-item').removeAttr('lay-key') 
　　　　　　});
 }