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. Request模块—数据解析工具

    一.爬虫基本步骤 指定URL信息 发起请求 获取响应数据 对响应数据进行数据解析 持久化存储 二.数据解析 1. 正则表达式 (1) 基本语法 1. 单字符: . : 除换行以外所有字符 [] :[a ...

  2. 12:集合map、工具类

    一.map集合 Map:一次添加一对元素.Collection 一次添加一个元素. Map也称为双列集合,Collection集合称为单列集合. 其实map集合中存储的就是键值对(结婚证书), map ...

  3. httpd: apr_sockaddr_info_get() failed for bogon

    AH00557: httpd: apr_sockaddr_info_get() failed for bogon AH00558: httpd: Could not reliably determin ...

  4. JavaScript学习之路-为什么要学习JavaScript语法

    版权声明:未经博主允许不得转载 前言 为什么要学习JavaScript语法,没有理由,因为工作需要,也为了成为全栈,那现在还是好好努力学习吧! 发展 说实话,JavaScript很好学也很重要,也很容 ...

  5. java几种垃圾收集方法和垃圾收集器

    标记清除法: 分为两个阶段,标记----清除 标记阶段将所有需要回收的对象做标记,然后在清除阶段将所有的标记对象回收 但是这种回收方法有很大的缺点,那就是这两个过程的的效率并不高,两个过程都是效率很低 ...

  6. shell脚本实现FTP自动上传文件

    -----多个文件----- #!/bin/bash ftp -n<<! open 172.20.10.242 user logftp logftp binary cd /data/ftp ...

  7. 使用Project进行项目管理

    下面开始介绍Project的使用. 1.  从下列地址获取Project 2010的副本. 版权问题,已删除地址. 2.安装 2.1 版权页 2.2 自定义安装页 2.3 安装完毕. 3.使用该软件进 ...

  8. 关于jQuery的一些东西

    1.jQuery的选择器学习     基本选择器        id选择器            $("#id名") 返回的是存储了指定的HTML元素对象的数组        标签 ...

  9. 基于Flume的日志收集系统方案参考

    前言 本文将简单介绍两种基于Flume的日志收集系统可能的架构方案,可根据不同的实际场景参考使用. 方案一 示例图如下: 说明: 每个日志源(http上报.日志文件等)对应一个Agent-c用于收集对 ...

  10. 从零开始学 Web 之 ES6(二)ES5的一些扩展

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...