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

最新推荐文章于 2024-03-13 10:12:17 发布

鸿鹄programmer

最新推荐文章于 2024-03-13 10:12:17 发布

阅读量1.5w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： layui那些事文章标签： layui laydate 渲染动态生成

本文链接：https://blog.youkuaiyun.com/u013781343/article/details/82016042

在使用layui的laydate动态生成时间选择框时，遇到点击无效或闪现消失的问题。原因是laydate在原始input上添加了lay-key属性，导致新克隆的节点渲染失败。解决方法是移除克隆节点上的lay-key属性，如使用jQuery的removeAttr('lay-key')。

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

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

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

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

鸿鹄programmer

关注关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

LayDate的事件弹窗二次渲染不成功解决办法

lxk199141的博客

11-04

1057

LayDate的事件弹窗二次渲染不成功解决办法关于页面上同一个input绑定了laydate，每次需要展示的选择时间范围动态更改不生效问题，我在网上找了好多博客，又将input框删掉，重新创建的，也有换lay-index的，但是都不成功，就去看了下源码，input框绑定事件的逻辑： //绑定的元素事件处理 Class.prototype.events = function(){ var that = this ,options = that.config //绑定呼出

运用Layui插件渲染树形表格

weixin_44573938的博客

07-07

2315

运用Layui插件渲染树形表格之前也曾介绍过如何运用layui插件渲染表格，但这里的树形表格和上次的表格虽然都是用layui插件渲染的，但是两者并不一样。树形表格虽然也需要用layui插件渲染，但是树形表格本身现在还不是layui插件的功能，今天使用的主要的渲染树形表格的js可以说是layui插件的扩展。下面就让我为大家介绍一下渲染树形表格。 1、从网上下载树形插件。 https://gi...

3 条评论您还未登录，请先登录后发表或查看评论

layui中的laydate 失效

qq_42782011的博客

03-13

1025

首先绑定切记不可使用id选择器，不然解决不了，这样重新渲染一下就可以了。

LayUI学习——date控件渲染失败或table空间渲染失败

neodke的博客

11-19

491

目前layui的官方文档中时间控件的渲染方法,是完全正确的,不用怀疑是不是缺少什么属性,或者没有加那个方法,至于有些文章中提到的lay-key的问题,完全不用担心,官方早已经优化了.只需要找到其他控件的错误进行修改即可。首先js代码和java一样,其中一部分出错,整个程序就会崩溃.所以js中只要有一个控件渲染失败,其他控是不会渲染.假设你导入了10个控件,前9个都正常,第10个出错,那么前9个是不会渲染的.表格控件和时间控件一起使用,表格控件的cols值的格式出问题。若果对你有帮助,给个赞,鼓励一下。

layui中的laydate.render二次加载失效的原因

gbh666666的博客

12-07

1万+

layui.use('laytpl', function(laytpl){ //温馨提示：多次调用use并不会重复加载laytpl.js，Layui内部有做模块cache处理。 var html = laytpl('').render({}); console.log(html); }); 也就是说，其实layui里面的插件，其实在根本上来说只要渲染一次就进入了缓存了，所以，在第一次渲染完就...

Layui 日期不能重新渲染

努力的nana

12-27

1238

Layui 日期不能重新渲染。

<div class="layui-form-item"> <label class="layui-form-label">出生日期</label> <div class="layui-input-inline layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-icon layui-icon-date"></i> </div> <input type="text" name="BirthDay" id="birthDate" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input"> </div> </div>这段代码实现后选不了日期

07-08

首先，我需要确认用户是否正确引入了Layui的CSS和JS文件，因为如果路径错误或者版本不兼容，可能导致功能失效。接着，用户可能没有正确初始化日期选择器，Layui需要通过JavaScript代码来绑定元素，否则input框只是...

<lay-form-item :label="item.value" prop="item.key">  <lay-input v-model="modelForm.NamesTem[item.key]" style="flex: 1;"></lay-input> </lay-form-item>如何让的让输入框有光标

09-26

3万+

最近项目使用了laydate.js这个时间插件。自从这个插件升级后确实还挺好用的，在选择时间上操作非常简单： laydate.render({ elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等 }); 通过elem绑定元素后，就可以使用了。（记得elem:'#text'中的这个#不要落下）...

laydate多次渲染不成功的解决办法

lovekang的专栏

12-30

1472

laydate多次渲染不成功的解决办法最近用layui的laydate控件，使用layer.open打开的页面里有个时间选择框，只有第一次打开才能弹出日期控件，后面用layer.open打开的页面均无法触发日期控件的弹出。。网上找了许多解决办法，比如render前删除lay-key，也有删除eventHandler属性的，但无一例外全部不行。。最后发现是加载的问题，解决办法，延迟渲染。 setTimeout(function () { laydate.re

页面设置多个layui的laydate 不能渲染，闪退（转载解决办法）

emma_guo的专栏

06-29

436

转载文章，文章来源https://blog.youkuaiyun.com/g229191727/article/details/88799900，感谢博主！！！记录解决办法： $(function () { //遍历循环创建实例 $('.J-startTime').each(function(index){ var _this=this; laydate.render({ elem: _this, done: fun

layui里面layer弹窗渲染layerdate,时间控件不出现，闪现问题，F12才出来

雷绍发

04-19

7845

直接说解决办法吧！排除法，首先看type类型首先说第一种 layer.open({ type: 1, content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响 }); 这种基本不会出现高度问题，一般出现这种情况就是冒泡，虽然都知道冒泡但是这里也是可能会遇到2种情况的， 1：通过按钮或者...

弹窗方式Layui组件laydate没有效果问题

Sug

09-08

1399

可能原因：可能重新初始化了laydate，laydate中的index参数被重置，但是绑定的事件没有移除，所以layui.index又从1开始解决：修改laydate的index为随机数 layui.laydate.index = Date.now();

layui数据表格渲染不出数据

zm9898的博客

07-12

2269

一定记住需要将返回状态码为0！

【Layui】laydate可能无法正常使用的原因

路远不知归

12-06

5392

【Layui】laydate可能无法正常使用的原因 1.重复引用laydate.js导致同一个页面重复引用两次laydate.js将导致render后依旧无法正常使用, 点击目标也不会有弹窗实际情况项目中使用对div进行load()的方式动态加载子页面, 父页面中已统一引用过一次laydate.js, 但在某个子页面中再次引用了laydate.js,致使该子页面无法正常使用laydat...

laydate插件之坑——渲染问题

wmq1314lql的博客

08-16

1万+

layui的laydate组件不可二次渲染问题(laydate取值)

Charles_mingquan的博客

04-20

6737

在laydate组件中，回调方法如下，但是并不生效！ laydate.render({ elem: '#test' ,done: function(value, date, endDate){ console.log(value); //得到日期生成的值，如：2017-08-18 console.log(date); //得到日期时间对象：{year: 201...

layui-点击时间无效-由js进行渲染HTML进行事件监听无效的解决方法

A88552211的博客

07-01

511

只监听一个元素（如按钮）使用 $(document).click('#id名或.class名',()={ 事件操作 }) 如果需要监听多个同类名的事件注意：typemin是你要监听被点击事件中同类名的，typeminList是typemin的父元素的类名，d.target当前被点击元素 $(document).click((d) => { let _this = d.target if(d.target.className.ind...

laydate无法2次刷新渲染

done1898的博客

10-26

911

那就将该dom元素删除，在重新动态添加转载于:https://www.cnblogs.com/tutao1995/p/9857013.html