解决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 相关文章推荐
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
jQuery实现DIV层收缩展开的方法
Feb 27 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
js返回顶部实例分享
Dec 21 Javascript
jquery实现楼层滚动效果
Jan 01 jQuery
vue路由传参三种基本方式详解
Dec 09 Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 Javascript
vue中三级导航的菜单权限控制
Mar 31 Vue.js
JavaScript控制台的更多功能
Apr 28 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使HTML标签自动补全闭合函数代码
2012/10/04 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
php倒计时出现-0情况的解决方法
2016/07/28 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
python安装与使用redis的方法
2016/04/19 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
python异常处理和日志处理方式
2019/12/24 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
python导入库的具体方法
2020/06/18 Python
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
怎样声明接口
2014/09/19 面试题
高中运动会广播稿
2014/09/16 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
结婚通知短信大全
2015/04/17 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
《开国大典》教学反思
2016/02/16 职场文书
2019辞职报告范本3篇!
2019/07/23 职场文书