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

最新推荐文章于 2024-03-13 10:12:17 发布
最新推荐文章于 2024-03-13 10:12:17 发布
阅读量1.4w 收藏 8
点赞数 5
分类专栏： layui那些事 文章标签： layui laydate 渲染 动态生成
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013781343/article/details/82016042
版权
在使用layui的laydate动态生成时间选择框时，遇到点击无效或闪现消失的问题。原因是laydate在原始input上添加了lay-key属性，导致新克隆的节点渲染失败。解决方法是移除克隆节点上的lay-key属性，如使用jQuery的removeAttr('lay-key')。
摘要由CSDN通过智能技术生成

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

<div class="box">时间选择<input type="text" id="datePick"></div> <button onclick="addOne()">克隆</button>
最低0.47元/天 解锁文章
鸿鹄programmer
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
laydate插件之坑——渲染问题
wmq1314lql的博客
08-16 1万+
最近项目使用了laydate.js这个时间插件。自从这个插件升级后确实还挺好用的，在选择时间上操作非常简单： laydate.render({ elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等 }); 通过elem绑定元素后，就可以使用了。（记得elem:'#text'中的这个#不要落下...
layui实现支持单月的时间选择
最新发布
weixin_45146163的博客
06-29 485
Layui框架提供了多款功能强大的日期筛选控件。然而，在实际应用中，经常需要实现仅对当前月份进行日期范围筛选。本文档旨在通过JavaScript扩展已有的Layui日期范围筛选功能，以实现单月份的日期范围筛选需求。具体的实现方法是在Layui提供的日期筛选基础上，通过控制页面属性来动态渲染所需的效果。
【Layui】laydate可能无法正常使用的原因
路远不知归
12-06 5011
【Layui】laydate可能无法正常使用的原因 1.重复引用laydate.js导致 同一个页面重复引用两次laydate.js将导致render后依旧无法正常使用, 点击目标也不会有弹窗 实际情况 项目中使用对div进行load()的方式动态加载子页面, 父页面中已统一引用过一次laydate.js, 但在某个子页面中再次引用了laydate.js,致使该子页面无法正常使用laydat...
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的laydate插件之坑——渲染问题
热门推荐
https://blog.csdn.net/sinat_36710456
09-26 3万+
最近项目使用了laydate.js这个时间插件。自从这个插件升级后确实还挺好用的，在选择时间上操作非常简单： laydate.render({ elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等 }); 通过elem绑定元素后，就可以使用了。（记得elem:'#text'中的这个#不要落下）...
laydate多次渲染不成功的解决办法
lovekang的专栏
12-30 1283
laydate多次渲染不成功的解决办法 最近用layui的laydate控件，使用layer.open打开的页面里有个时间选择框，只有第一次打开才能弹出日期控件，后面用layer.open打开的页面均无法触发日期控件的弹出。。网上找了许多解决办法，比如render前删除lay-key，也有删除eventHandler属性的，但无一例外全部不行。。 最后发现是加载的问题，解决办法，延迟渲染。 setTimeout(function () { laydate.re
LayUI学习——date控件渲染失败或table空间渲染失败
neodke的博客
11-19 363
目前layui的官方文档中时间控件的渲染方法,是完全正确的,不用怀疑是不是缺少什么属性,或者没有加那个方法,至于有些文章中提到的lay-key的问题,完全不用担心,官方早已经优化了.只需要找到其他控件的错误进行修改即可。首先js代码和java一样,其中一部分出错,整个程序就会崩溃.所以js中只要有一个控件渲染失败,其他控是不会渲染.假设你导入了10个控件,前9个都正常,第10个出错,那么前9个是不会渲染的.表格控件和时间控件一起使用,表格控件的cols值的格式出问题。若果对你有帮助,给个赞,鼓励一下。
layui里面layer弹窗渲染layerdate,时间控件不出现，闪现问题，F12才出来
雷绍发
04-19 7610
直接说解决办法吧！ 排除法，首先看type类型 首先说第一种 layer.open({ type: 1, content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响 }); 这种基本不会出现高度问题，一般出现这种情况就是冒泡，虽然都知道冒泡 但是这里也是可能会遇到2种情况的， 1：通过按钮或者...
LayDate的事件弹窗二次渲染不成功解决办法
lxk199141的博客
11-04 942
LayDate的事件弹窗二次渲染不成功解决办法 关于页面上同一个input绑定了laydate，每次需要展示的选择时间范围动态更改不生效问题，我在网上找了好多博客，又将input框删掉，重新创建的，也有换lay-index的，但是都不成功，就去看了下源码，input框绑定事件的逻辑： //绑定的元素事件处理 Class.prototype.events = function(){ var that = this ,options = that.config //绑定呼出
Layui环境下form表单提交；jquery.form.js；lay-verify，lay-filter；
m0_52613676的博客
11-29 3223
话不多说，直接看代码： 引入相关文档： <script th:src="@{/js/jquery-1.9.1.js}"></script> <script th:src="@{/js/jquery.form.js}"></script> <script src="/layui/layui.js"></script> <link rel="stylesheet" href="/layui/css/layui.css"> （这
运用Layui插件渲染树形表格
weixin_44573938的博客
07-07 2251
运用Layui插件渲染树形表格 之前也曾介绍过如何运用layui插件渲染表格，但这里的树形表格和上次的表格虽然都是用layui插件渲染的，但是两者并不一样。树形表格虽然也需要用layui插件渲染，但是树形表格本身现在还不是layui插件的功能，今天使用的主要的渲染树形表格的js可以说是layui插件的扩展。 下面就让我为大家介绍一下渲染树形表格。 1、 从网上下载树形插件。 https://gi...
layui请求加token_layui登录后token问题解决
weixin_35870524的博客
12-24 2392
是一个非常简单且实用的后台管理系统搭建框架，里面的插件丰富使用简单，只需要在原有基础上进行修改即可，但是在数据处理方面略显薄弱，内置的jquery在实际过程中略显不足，若是能添加内置的mvc模式框架那就更好了。先介绍layui在登录这一块的使用：登录问题主要是在token的存储调用上，先贴出后台的创建token以及拦截器的代码首先引入jar包io.jsonwebtokenjjwt0.7.0jack...
弹窗方式Layui组件laydate没有效果问题
Sug
09-08 1266
可能原因：可能重新初始化了laydate，laydate中的index参数被重置，但是绑定的事件没有移除，所以layui.index又从1开始 解决：修改laydate的index为随机数 layui.laydate.index = Date.now();
layui数据表格渲染不出数据
zm9898的博客
07-12 2185
一定记住需要将返回状态码为0！
layui中的laydate 失效
qq_42782011的博客
03-13 712
首先绑定切记不可 使用id选择器，不然解决不了，这样重新渲染一下就可以了。
页面设置多个layui的laydate 不能渲染，闪退（转载解决办法）
emma_guo的专栏
06-29 372
转载文章，文章来源https://blog.csdn.net/g229191727/article/details/88799900，感谢博主！！！ 记录解决办法： $(function () { //遍历循环创建实例 $('.J-startTime').each(function(index){ var _this=this; laydate.render({ elem: _this, done: fun
layui的laydate组件不可二次渲染问题(laydate取值)
Charles_mingquan的博客
04-20 6641
在laydate组件中，回调方法如下，但是并不生效！ laydate.render({ elem: '#test' ,done: function(value, date, endDate){ console.log(value); //得到日期生成的值，如：2017-08-18 console.log(date); //得到日期时间对象：{year: 201...
layui 日期不能重新渲染
努力的nana
12-27 976
【代码】layui 日期不能重新渲染。
layui-v2.5.5 lay-config1.0.4 xfile组件 动态修改参数 重新渲染
06-12
您好，根据您的描述，我理解您想要动态修改 layui-v2.5.5 和 lay-config1.0.4 版本中的 xfile 组件的参数并重新渲染。如果我的理解有误，请及时纠正。 首先，您可以通过修改 xfile 组件的参数来达到动态修改的目的。具体来说，可以通过调用 layui.use 方法来加载 xfile 组件并初始化，然后通过 layui.config 方法来修改 xfile 组件的参数，最后再调用 xfile 组件的渲染方法来重新渲染。 以下是一个示例代码，供您参考： ```html <div class="layui-upload"> <button type="button" class="layui-btn" id="test">上传文件</button> <div class="layui-upload-list"> <table class="layui-table"> <thead> <tr><th>文件名</th><th>大小</th><th>操作</th></tr> </thead> <tbody id="demoList"></tbody> </table> </div> </div> ``` ```javascript layui.use(['upload', 'xfile'], function(){ var upload = layui.upload; var xfile = layui.xfile; // 初始化 xfile 组件 xfile.render({ elem: '#test', url: '/upload/', done: function(res){ // 上传完毕回调 console.log(res); } }); // 修改 xfile 组件的参数 layui.config({ base: '/static/js/layui/lay/modules/xfile/', version: '1.0.4' }).extend({ xfile: 'xfile', }).use(['xfile'], function(){ var xfile = layui.xfile; xfile.config({ size: 1024 * 10, exts: 'doc|docx|xls|xlsx', multiple: true, choose: function(obj){ console.log(obj); } }); }); // 重新渲染 xfile 组件 xfile.render({ elem: '#test' }); }); ``` 在上述示例代码中，我们首先通过 layui.use 方法加载了 upload 和 xfile 组件，并使用 xfile.render 方法初始化了 xfile 组件。然后，我们通过 layui.config 方法来修改 xfile 组件的参数，并使用 xfile.render 方法重新渲染了 xfile 组件。其中，xfile.config 方法用于修改 xfile 组件的参数，size 参数用于限制文件大小，exts 参数用于限制文件类型，multiple 参数用于支持多文件上传，choose 回调函数用于选择文件后的回调。 希望这个示例代码能够对您有所帮助。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值