解决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 相关文章推荐
document.designMode的功能与使用方法介绍
Nov 22 Javascript
页面中js执行顺序
Nov 09 Javascript
javascript权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
JS实现双击编辑可修改状态的方法
Aug 14 Javascript
学习使用bootstrap3栅格系统
Apr 12 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 Javascript
详解AngularJs ui-router 路由的简单介绍
Apr 26 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 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实现一个多功能购物网站的案例
2017/09/13 PHP
Node.js中对通用模块的封装方法
2014/06/06 Javascript
AngularJS入门教程(一):静态模板
2014/12/06 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
js实现上传并压缩图片效果
2018/01/10 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
朴素贝叶斯算法的python实现方法
2014/11/18 Python
Python导入txt数据到mysql的方法
2015/04/08 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
python3.6编写的单元测试示例
2019/08/17 Python
python hashlib加密实现代码
2019/10/17 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
三星法国官方网站:Samsung法国
2019/10/31 全球购物
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
中专毕业自我鉴定
2013/10/16 职场文书
如何写你的创业计划书
2014/01/07 职场文书
优秀班集体申报材料
2014/12/25 职场文书
2015年老干部工作总结
2015/04/23 职场文书
如何做好工作总结!
2019/04/10 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书
赞美教师的句子
2019/09/02 职场文书
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python
Python 数据可视化之Seaborn详解
2021/11/02 Python
分享Python获取本机IP地址的几种方法
2022/03/17 Python