layer插件layer.photos()动态插入的图片无法正常显示
layer插件layer.photos()动态插入的图片无法正常显示,点击后面插入的图片,显示的是之前的图片列表,再次点击又是正常
有朋友遇到同样的问题
http://fly.layui.com/jie/4124.html
layer v2.4 弹层组件
layer.photos动态插入图片后,点击新插入的图片会弹出插入前的最后一张图片。
如果再次调用layer.photos,点击新图片会提示错误:
layer.js:1006 Uncaught TypeError: Cannot read property 'src' of undefined
现在的解决办法是在layer.js中的第902行的
loop || parent.on('click', options.img, function(){
改为
loop || parent.off('click').on('click', options.img, function(){
不知道有没有什么更好的办法可以解决动态插入图片的问题。![]()
我的解决办法是:
点击之前,先把图片data数据弄好

把上面的代码改成
loop || parent.on('click', options.img, function(){
pushData();
var othis = $(this), index = othis.attr('layer-index');
layer.photos($.extend(options, {
photos: {
start: index,
data: data,
tab: options.tab
},
full: options.full
}), true);
})
解决!!
这样改后,无论是增加图片,还是移除图片,效果正常
使用tips:
1.如果需要重复执行layer.photos(),避免重复创建遮罩,可以加上id参数避免重复创建!
//调用示例
layer.photos({
id: 'img',
photos: '#layer-photos-demo'
,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
});
2. layer.photos(),options.photos参数最好使用页面上存在DOM结构,因为是使用事件委托绑定的事件。
layer插件layer.photos()动态插入的图片无法正常显示的更多相关文章
- 关于Latex中插入Visio图片文字不显示的问题
经过探索,将Visio保存为pdf格式是最完美的解决方式,因为pdf文件保存了所有格式和字体信息. Visio输出pdf时要使其符合PDF/A标准.如果包含Visio的多余信息,就会在一些低版本Lat ...
- layer插件学习——弹框(自定义页)
本文是自己整理的关于layer插件的弹框样式结果 介绍: 官方介绍:layer至今仍作为layui的代表作,受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自 ...
- 弹出框layer插件
有时候我们在网页制作中需要引用各种弹出框,弹出框的展现形式多种多样.可以是弹出图片,视频,文字,也可以是弹出图片轮播等形式: 弹出框插件——layer使用方法(其实官方文档中已经介绍的很详细): 下载 ...
- 动态插入图片到 svg 中
动态插入图片到 svg 中使用 createElementNS 来创建svg标签,通过setAttributeNS 来设置属性, 要注意两点,创建的时候要有'http://www.w3.org/200 ...
- 弹出框插件layer使用
layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 插件官方地址:http://layer.layui.co ...
- layer插件学习——提示层
本文是自己整理的关于layer插件的提示层的结果 一.准备工作 下载jQuery插件和layer插件,并引入插件(注意:jQuery插件必须在layer插件之前引用) 百度云资源链接: jQuery插 ...
- layer插件学习——询问框
本文是自己整理的关于layer插件的询问框样式结果 一.准备工作 下载jQuery插件和layer插件,并引入插件(注意:jQuery插件必须在layer插件之前引用) 百度云资源链接: jQuery ...
- layer插件学习——icon样式
本文是自己整理的关于layer插件的icon样式结果 一.准备工作 下载jQuery插件和layer插件,并引入插件(注意:jQuery插件必须在layer插件之前引用) 百度云资源链接: jQuer ...
- 用jQuery Validate+layer插件实现好看的表单提交效果
作为初学者,以前做表单验证都是自己写的,目的是让自己更好的了解代码,加深自己对javascript的理解,但是其实在很久都知道有一个很好用的表单验证插件:jQuery Validate.js,一直都没 ...
随机推荐
- unable to load http://docbook.sourceforge.net/release/xsl/current/html/docbook.xsl
问题:unable to load http://docbook.sourceforge.net/release/xsl/current/html/docbook.xsl 解决:yum -y inst ...
- leetcode144-先序遍历非递归实现
二叉树的先序/中序/后序遍历递归/非递归实现,讲的很清楚,其中后序遍历和先序中序的处理有些不一样: https://blog.yangx.site/2016/07/22/Python-binary-t ...
- django-celery 创建多个broker队列 异步执行任务时指定队列
一.这里不再详细述说 django 框架中如何使用celery, 重点放在如何实现创建多个队列, 并指定队列存放异步任务 笔者使用 django-celery==3.2.2 模块, 配置项及配置参 ...
- boost::bind 实现原理, 手动实现一个
template<typename R, typename T, typename A1> class hangj_call { public: hangj_call(R (T::*f_) ...
- JavaScript学习之路-语法
版权声明:未经博主允许不得转载 在JavaScript中如何写语法呢?这里你可以去看一些教学文档来得快一些,这里不介绍,有点基础的也可以复习一下. //定义变量并赋值 var a; //定义变量 va ...
- C#6.0语言规范(一) 介绍
C#(发音为“See Sharp”)是一种简单,现代,面向对象,类型安全的编程语言.C#源于C语言系列,对C,C ++和Java程序员来说很熟悉.EC#International将EC#标准化为ECM ...
- 使用node.js + json-server + mock.js 搭建本地开发mock数据服务
在开发过程中,前后端不论是否分离,接口多半是滞后于页面开发的.所以建立一个REST风格的API接口,给前端页面提供虚拟的数据,是非常有必要的.对比过多种mock工具后,我最终选择了使用 json se ...
- Python又把GUI界面攻下了,今天就告诉你怎么玩
0.引言 学Python这么久了,一直想做个界面出来,最近发现Python有个内置库tkinter,利用它可以很轻松做出一些简易的UI界面,首先来看Python官方对Tkinter的说明: The t ...
- tf.transpose()的用法
一.tensorflow官方文档内容 transpose( a, perm=None, name='transpose' ) Defined in tensorflow/python/ops/arra ...
- gulp和grunt 分享ppt
gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大 ...