解决layer.open后laydate失效的问题


Posted in Javascript onSeptember 06, 2019

如果你的open方式是1(html)的话这样是可以的,

如果是2(iframe)方式打开,你把注入的代码写在打开的界面就可以了不用这样写,open的参数type是有区别的,所以请注意:

今天在开发项目时候使用到了laydate,按照官方文档说明使用发现出现下面的问题:

1.在正常页面中使用laydate组件没有问题,点击可以正常显示出来

2.但是在layer.open打开一个窗体后就没有效果了

分析思路:由于页面的加载如果js在页面元素显示之前就执行,那么就会出现无法渲染组件的问题,所有决定等元素渲染后再执行js,

于是先看官方对layer的文档官方layer弹出窗文档,发现success参数说明:当你需要在层创建完毕时执行一些语句,可以通过该回调。

所有把对laydate的渲染放在这里即可,下面是success中的代码:

success: function(layero, index) {//成功后注入事件,不然js在页面完成完成之前就执行,点击没有效果
 laydate.render({
 elem: '#publishTime', //指定元素
 type: 'datetime', //日期格式类型
 });
}

最后记得使用到什么组件需要引入才可以。

以上这篇解决layer.open后laydate失效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何实现浏览器上的右键菜单
Jul 10 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 Javascript
iframe父页面获取子页面参数的方法
Feb 21 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
深入浅析react native es6语法
Dec 09 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 Javascript
node.js连接mysql与基本用法示例
Jan 05 Javascript
深入了解JS之作用域和闭包
Jun 16 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 #Javascript
layui在form表单页面通过Validform加入简单验证的方法
Sep 06 #Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 #Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 #Javascript
vue按需加载实例详解
Sep 06 #Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 #Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 #Javascript
You might like
优化PHP代码技巧的小结
2013/06/02 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
自写简单JS判断是否已经弹出页面
2010/10/20 Javascript
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
理解javascript中的闭包
2017/01/11 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
详解在Vue中有条件地使用CSS类
2017/09/30 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
JavaScript实现简单轮播图效果
2018/12/01 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
Python命令行解析模块详解
2018/02/01 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
Python笔记之代理模式
2019/11/20 Python
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
电子商务专业个人的自我评价
2013/11/19 职场文书
完美主义个人的自我评价
2014/02/17 职场文书
2014年社区植树节活动方案
2014/02/28 职场文书
房产转让协议书
2014/04/11 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
艾滋病宣传标语
2014/06/25 职场文书
个人作风建设心得体会
2014/10/22 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript