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()动态插入的图片无法正常显示的更多相关文章

  1. 关于Latex中插入Visio图片文字不显示的问题

    经过探索,将Visio保存为pdf格式是最完美的解决方式,因为pdf文件保存了所有格式和字体信息. Visio输出pdf时要使其符合PDF/A标准.如果包含Visio的多余信息,就会在一些低版本Lat ...

  2. layer插件学习——弹框(自定义页)

    本文是自己整理的关于layer插件的弹框样式结果 介绍: 官方介绍:layer至今仍作为layui的代表作,受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自 ...

  3. 弹出框layer插件

    有时候我们在网页制作中需要引用各种弹出框,弹出框的展现形式多种多样.可以是弹出图片,视频,文字,也可以是弹出图片轮播等形式: 弹出框插件——layer使用方法(其实官方文档中已经介绍的很详细): 下载 ...

  4. 动态插入图片到 svg 中

    动态插入图片到 svg 中使用 createElementNS 来创建svg标签,通过setAttributeNS 来设置属性, 要注意两点,创建的时候要有'http://www.w3.org/200 ...

  5. 弹出框插件layer使用

    layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 插件官方地址:http://layer.layui.co ...

  6. layer插件学习——提示层

    本文是自己整理的关于layer插件的提示层的结果 一.准备工作 下载jQuery插件和layer插件,并引入插件(注意:jQuery插件必须在layer插件之前引用) 百度云资源链接: jQuery插 ...

  7. layer插件学习——询问框

    本文是自己整理的关于layer插件的询问框样式结果 一.准备工作 下载jQuery插件和layer插件,并引入插件(注意:jQuery插件必须在layer插件之前引用) 百度云资源链接: jQuery ...

  8. layer插件学习——icon样式

    本文是自己整理的关于layer插件的icon样式结果 一.准备工作 下载jQuery插件和layer插件,并引入插件(注意:jQuery插件必须在layer插件之前引用) 百度云资源链接: jQuer ...

  9. 用jQuery Validate+layer插件实现好看的表单提交效果

    作为初学者,以前做表单验证都是自己写的,目的是让自己更好的了解代码,加深自己对javascript的理解,但是其实在很久都知道有一个很好用的表单验证插件:jQuery Validate.js,一直都没 ...

随机推荐

  1. IntelliJ Idea 授权服务器使用

    JetBrains授权服务器 1 http://intellij.mandroid.cn/ 支持的版本 IntelliJ IDEA 7.0 或更高ReSharper 3.1 或更高ReSharper ...

  2. speex与webrtc回声消除小结

    回声消除AEC包含:   延时估计对齐+线性自适应滤波器+NLP(双讲检测.处理)+舒适噪声CNG 一.speex aec 1.没有NLP 2.只考虑实时DSP系统,即是没有延时对齐等 3.自适应滤波 ...

  3. mysql常用function

    前言: 本文主要是参考mysql官方文档,并加上自己的测试用例,来加深自己对mysql函数的理解,也借此平台与大家分享,如有不妥和错误之处欢迎读者评论,我会及时改正,愿与大家一起学习进步. 概述: 所 ...

  4. 安装mysql.zip文件教程(包含常见问题修复)

    参考链接: https://jingyan.baidu.com/article/63f236284aca280208ab3dcc.html https://jingyan.baidu.com/arti ...

  5. Spring Boot + Spring Cloud 实现权限管理系统 后端篇(十四):项目打包部署

    项目打包部署 安装MySQL镜像 注意:如果使用docker镜像安装MySQL,也需要在前端部署主机安装MySQL,因为备份还原功能是使用MySQL的本地命令进行操作的. 下载镜像 执行以下命令,拉取 ...

  6. 详解 Java NIO

    文件的抽象化表示,字节流以及字符流的文件操作等属于传统 IO 的相关内容,我们已经在前面的文章进行了较为深刻的学习了. 但是传统的 IO 流还是有很多缺陷的,尤其它的阻塞性加上磁盘读写本来就慢,会导致 ...

  7. js常用面试题整理

    1.array操作关键字: pop() 删除最后一个:push最后添加一个或者多个:reverse颠倒数组:shift删除第一个元素:unshift首部添加元素:concat衔接两个数组:join把数 ...

  8. CMMI三个过程域的流程及达到特定目标、共性目标的要求(RD需求管理过程,PI产品集成过程,TS技术解决方案)

    RD需求管理过程 通过面谈的方式获取相关干系人关于产品生命周期各阶段的需求.期望,限制条件,接口 将相关干系人的需求.期望,限制条件,接口转化成用户需求说明书 依据客户需求,确定产品或产品组件需求,形 ...

  9. Tomcat8源码笔记(一)Lifecycle接口

    第一次阅读Tomcat8源码,就以Lifecycle作为笔记阅读的开篇吧,一千个读者就有一千个哈姆雷特,每个人都Tomcat的理解都不同,如果不记录一次Tomcat源码可能忘了就忘了. 断断DEBUG ...

  10. Docker系列之Docker镜像(读书笔记)

    一.基本概念 Docker包括三个基本概念镜像.容器.仓库. Docker镜像:就是一个只读的模板.例如:一个镜像可以包含一个完整的ubuntu操作系统环境,里面仅安装了Apache或其他应用程序.用 ...