解决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获得地址栏参数的两种方法
Nov 08 Javascript
无语,javascript居然支持中文(unicode)编程!
Apr 12 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
Apr 05 Javascript
理解JavaScript的prototype属性
Feb 11 Javascript
javascript中replace( )方法的使用
Apr 24 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
javascript中alert()与console.log()的区别
Aug 26 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
jQuery的$.extend 浅拷贝与深拷贝
Mar 08 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 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 获取完整url地址
2008/12/20 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
php+ajax+json 详解及实例代码
2016/12/12 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
深入认识javascript中的eval函数
2009/11/02 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
JS实现倒计时和文字滚动的效果实例
2014/10/29 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
js事件驱动机制 浏览器兼容处理方法
2016/07/23 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
对vue事件的延迟执行实例讲解
2018/08/28 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
js实现随机点名
2021/01/19 Javascript
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
Python代码实现KNN算法
2017/12/20 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
python如何生成各种随机分布图
2018/08/27 Python
详解python中sort排序使用
2019/03/23 Python
python实现批量转换图片为黑白
2020/06/16 Python
python导入库的具体方法
2020/06/18 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
继承公证书
2014/04/09 职场文书
部门活动策划方案
2014/08/16 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
观看建国大业观后感
2015/06/01 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python