案例:做个聊天室项目,数据都是通过ajax刷新出来的,而对新数据绑定的fancybox均无效,点击直接打开到了新页面而不是弹窗,解决方法其实很简单

简单分析:ajax加载内容是在$(document).ready()之后的操作,这个时候给绑定函数的时候,找到的元素集合中还不包括ajax加载的内容,所以原来的没有问题,Ajax后加载的就没有绑定

详细分析:我们的   fancybox 使用的时候要写在 jquery的  $(document).ready(function () {})里面,也就是在文档加载完之后,就绑定给了 fancybox  ,但是我们ajax之后出来的数据,已经是在这个文档绑定之后出现的,所以现在你点击是没有用的,因为没有绑定到时间,那么解决方法呢?就是重新绑定一遍写在ajax的success成功之后的里面

例如,我这里有个ajax,在成功之后会执行一段代码,在代码的最后一段,我们再重新绑定 fancybox 即可

(也就是页面里面,在$(document).ready(function () {})里面有一个 fancybox的绑定给原来的页面使用,而新的ajax出来的数据,就写在ajax的success成功之后的里面即可,这个时候就不用再写 $(document).ready(function () {}) 了)

$("a.showpic").fancybox({width: 602,height: 421,autoScale: false,transitionIn: 'none',transitionOut: 'none',type: 'iframe',padding: 0,margin: 0,hideOnOverlayClick: false,  /*如果不希望点击遮罩层或者是窗口其他的地方就能关闭, 那么这里就设置为false*/showCloseButton: false   /*设置右上角的关闭按钮为关闭状态*/});

把上面的重新绑定事件, 放到下面的图里面的ajax里面的 success里面,就相当于是重新绑定了新出来的.showpic这个类的fancybox事件了

如果是fanxybox是在 UpdatePanel失效呢?参看 http://blog.csdn.net/eiwing/article/details/7090536

如果是 用jquery.fancybox时出现TypeError: loading is undefined 错误:参看http://egomu.com/development/40/

$("#fancybox-tmp").empty();//清除id等于fancybox-tmp下面的子元素
$("#fancybox-loading").empty();//清除id等于fancybox-loading下面的子元素
$("#fancybox-overlay").empty();//清除id等于fancybox-overlay下面的子元素
$("#fancybox-wrap").empty();//清除id等于fancybox-wrap下面的子元素
$("#fancybox-tmp").remove();//删除id等于fancybox-tmp元素
$("#fancybox-loading").remove();//删除id等于fancybox-loading元素
$("#fancybox-overlay").remove();//删除id等于fancybox-overlay元素
$("#fancybox-wrap").remove();//删除id等于fancybox-wrap元素

据说还有一种叫做 live方法 的方法,我没有用过,可以参考 jquery的 api 搜索

也可以看看这里

<script type="text/javascript">
<!--
jQuery(document).ready(function(){
jQuery(".brand li img").live('click',function(){ jQuery(this).parents("li").find("ul").slideToggle();
});
});
-->
</script> 

fancybox 无效 失效 直接打开页面, ajax 之后 fancybox对更新的数据无效,Jquery失效 无效...相关推荐

  1. 七十、Vue城市页面Ajax动态渲染和兄弟组件数据传递

    2020/10/29. 周四.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...

  2. ief12执行一次js才有效_IE浏览器打开页面js失效 开启F12后刷新正常

    这个问题啊.. 苦恼多时 常规解决法: 更新:meta放在link和script之前,jsp的话要把 放到head下 meta后面 排查了 下,主要是文档模式作怪,此处由上到下,改为默认打开页面为ie ...

  3. ajax使用html()后样式无效,jquery.ajax使用字符串拼接后内联css样式失效

    问题所在: 是这样的,我使用ajax调用了一串json数据,使用字符串拼接的方法动态插入div容器.结果css并没有对动态插入的内容加css样式. 代码描述: css使用的内联,在head部分, jq ...

  4. 【pmcaff】打开页面,这个行为值多少钱?

    点击上方 "公众号" 可以订阅哦! 这是一个非常有意思的话题,作为电商狗,从来没有从这个角度思考过. 一般情况下,不同的行业广告价值不一样,所以我把问题着眼点改一下,即我们每打开一 ...

  5. ajax排行页面,ajax简单页面

    简单的注册页面运用ajax 主页面 无标题文档 //首先引用jquery文件 登录页面 用户名: 密码: $("#btn").click(function(){ //1.取内容 v ...

  6. layui两个html传值,Layui(二级页面) 弹出层打开页面|传递参数

    一级弹出层:弹出打开页面 layer.open({ type: 2, title: '添加用户', content: '../user/goAdd', area: ['460px', '450px'] ...

  7. 进一步封装axios并调用其读取数据(吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据)

    注意!!!(修改于2020年7月18日) 在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据 报错截图如下 报错内容: {&quo ...

  8. 【问题解决】移动端rem适配的时候会出现打开页面时先缩小(放大)后恢复到正常页面的问题

    [问题解决]移动端rem适配的时候会出现打开页面时先缩小(放大)后恢复到正常页面的问题 参考文章: (1)[问题解决]移动端rem适配的时候会出现打开页面时先缩小(放大)后恢复到正常页面的问题 (2) ...

  9. 静态html的ajax如何发请求,静态页面ajax - 冥焱的个人空间 - OSCHINA - 中文开源技术交流社区...

    1.静态页面 $.ajax({ type:"get", url:"http://localhost:8080/app/register/sendSMS",//请 ...

最新文章

  1. 怎样使用Spring Boot项目的单元测试
  2. iOS12系统应用开发基础教程发送邮件
  3. 第五章 常用Lua开发库2-JSON库、编码转换、字符串处理
  4. Memetic Algorithm(文化基因算法)
  5. GIS开源库shapeLib的使用方法
  6. POJ 3126 Prime Path
  7. xml转换为json格式时,如何将指定节点转换成数组 Json.NET
  8. VirtualBox 虚拟 CentOS 7 磁盘扩容
  9. create-react-app 创建react应用环境变量(env)配置
  10. 生活大爆炸soft kitty
  11. 教程 海湾主机crt_海湾消防主机JB-QT-GST5000火灾报警控制器(联动型)与crt是怎么连接编公式的...
  12. 网络计划的自由时间和松弛时间free and slack
  13. Delphi第三方控件大测评
  14. qq空间日志总显示服务器升级,QQ空间里加不上日志是怎么回事?
  15. XFtp - 显示隐藏的文件和文件夹
  16. mysql根据出生日期计算年龄并查询
  17. 关于flash分区打印信息jffs2: jffs2_scan_eraseblock(): Magic bitmask 0x1985
  18. droid3 flash
  19. 有效扩展:来自预训练和微调变换器的见解、rct.ai训练出5亿参数的BERT-X模型
  20. 《牧羊少年的奇幻之旅》-保罗 柯艾略

热门文章

  1. linux boot efi分区 容量,解决Ubuntu上由于/boot容量不足引起的无法更新系统
  2. html跨行使用的属性,HTML表格标记详解4:TD参数中设定跨列跨行属性
  3. php中访问控制_PHP之Trait详解
  4. php mysql ajax登录界面_PHP+jQuery+Ajax实现用户登录与退出
  5. 用Eclipse制作博客
  6. 20201125:力扣第216场周赛(下)
  7. 机器学习篇01:在线学习的支持向量机算法学习笔记
  8. linux utf8转gbk_「正点原子Linux连载」第四章开发环境搭建(2)
  9. mysql cmd 实时监控_mysql实时监听sql语句
  10. Linux常用命令(持续更新)